title: MUI - How can I style the scrollbar with CSS in JS?
body: <p>I really hate having to have an external stylesheet for my scrollbar stylings and I want to put it in with the rest of my styles on my root component. I have tried this...</p>
  
  <pre><code>const styles = (theme: Theme) =&gt;
    createStyles({
      scrollBar: {
        '&amp;::-webkit-scrollbar': {
          width: '0.4em'
        },
        '&amp;::-webkit-scrollbar-track': {
          '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)'
        },
        '&amp;::-webkit-scrollbar-thumb': {
          backgroundColor: 'rgba(0,0,0,.1)',
          outline: '1px solid slategrey'
        }
      }
    });
  </code></pre>
  
  <p>and then adding the class to root component div. I am using the withStyles HOC and the other styles there are being applied, so I know it is working, but I cannot figure out how to get at the scroll bar styles. Is there any way to do this?</p>
  
  <pre><code>&lt;div className={classes.scrollBar} /&gt;
  </code></pre>