title: Override Material UI component with SASS classes
body: <p>I am utilizing Material UI components but want to move all my styles into a <code>.scss</code> file. Currently, I have a large styles object in the same javascript file where I use the Material UI components. This styles object is being passed to the Material UI components via the <code>style</code> prop. This as I see it is more or less just inline styling and my goal is to eliminate this pattern. I have other nested components (Material UI ones as well as custom React ones) within these Material UI components. Here is an example I am working with:</p>
  
  <pre><code> const styles= {//all my css styles in here}
  
  &lt;TableRowColumn key={index} style={styles.column}&gt;
       &lt;span className="checkbox-thing"&gt;
         &lt;input
           ....
         /&gt;
       &lt;/span&gt;
  &lt;/TableRowColumn&gt;
  </code></pre>
  
  <p>I have referenced the override documentation: <a href="https://material-ui-next.com/customization/overrides/" rel="nofollow noreferrer">https://material-ui-next.com/customization/overrides/</a></p>
  
  <p>As well as this Stack Overflow question: <a href="https://stackoverflow.com/questions/46930275/how-to-style-material-ui-next-components-with-styled-components-and-sass">How to style material ui next components with styled components and SASS</a></p>
  
  <p>Both of these in my opinion do not make it clear how to go about using an external <code>.scss</code> (where the styles would live) and referencing the class names in that file into the Material UI component. I simply was to be able to do something like this, which is currently easy to accomplish with normal HTML elements:</p>
  
  <pre><code>&lt;input   
      type="checkbox"
      checked={
        this.props.isChecked
      }
      className="someClassInTheSCSSFile"
  /&gt;
  </code></pre>
  
  <p>In summary I want to:</p>
  
  <ul>
  <li><p>Remove my large styles object into separate classes into a <code>.scss</code> file</p></li>
  <li><p>Reference a class in the  <code>.scss</code> file and pop it into a Material UI component </p></li>
  </ul>