title: Material UI v.4 Theme provider and StylesProvider. I can't use the "classes" prop of a component to override the styles
body: <p>I'm trying to set advanced usage Material UI v.4  Theme provider and StylesProvider<br />
  I can't use the &quot;classes&quot; prop of a component to override the styles.</p>
  <p>I follow that instruction and some experience from past projects.
  <a href="https://v4.mui.com/styles/advanced/#injectfirst" rel="nofollow noreferrer">Advanced Material UI v 4.12.3</a></p>
  <p>My App.js:</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import { Provider } from &quot;react-redux&quot;;
  import { ThemeProvider, StylesProvider } from &quot;@material-ui/core/styles&quot;;
  import theme from &quot;./styles/theme&quot;;
  
  import store from &quot;./redux/store&quot;;
  import AppRouter from &quot;./routes/AppRouter&quot;;
  import ErrorBoundary from &quot;./ErrorBoundary&quot;;
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;ErrorBoundary&gt;
        &lt;StylesProvider injectFirst&gt;
          &lt;ThemeProvider theme={theme}&gt;
            &lt;AppRouter /&gt;
          &lt;/ThemeProvider&gt;
        &lt;/StylesProvider&gt;
      &lt;/ErrorBoundary&gt;
    &lt;/Provider&gt;,
    document.getElementById(&quot;root&quot;),
  );
  </code></pre>
  <p>part of package.json:</p>
  <pre><code> &quot;dependencies&quot;: {
      &quot;@material-ui/icons&quot;: &quot;^4.9.1&quot;,
      &quot;@material-ui/lab&quot;: &quot;^4.0.0-alpha.56&quot;,
     }
  
    &quot;devDependencies&quot;: {
      &quot;@material-ui/core&quot;: &quot;^4.9.12&quot;,
      &quot;@material-ui/pickers&quot;: &quot;^3.2.10&quot;,
     }
  </code></pre>
  <p>theme.js</p>
  <pre><code>import { createTheme } from &quot;@material-ui/core/styles&quot;;
  
  const theme = createTheme({
    palette: {
      primary: {
        main: &quot;#08718f&quot;,
      },
      secondary: {
        main: &quot;#604486&quot;,
      },
    },
  });
  
  export default theme;
  </code></pre>
  <p>image-preview.scss</p>
  <pre><code>.previewButton {
    border-radius: 10px;
    border: 1px solid #dcdcdc;
    margin-right: 7px;
    margin-bottom: 7px;
    opacity: 0.6;
  
    &amp;:hover {
      border: 1px solid #3f51b5;
      opacity: 1;
    }
  }
  
  </code></pre>
  <p>SomeComponent.js</p>
  <pre><code>import { Button } from &quot;@material-ui/core&quot;;
  import &quot;../../styles/common/image-preview.scss&quot;;
  
  
  
            {imageObj?.map((el, index) =&gt; (
              &lt;Button
                className='previewButton'
                key={el.id}
                onClick={() =&gt; setSelectedImage(index)}
              &gt;
                &lt;img className='imageButton' src={el.url} alt={el.imgName} /&gt;
              &lt;/Button&gt;
            ))}
  </code></pre>
  <p>This code above works great. I can easily rewrite Material UI components with the flag &quot;injectFirst&quot; from App.js .</p>
  <p>Inside Button, I can change the style <code>className=`previewButton'</code> it works</p>
  <p>But if I made these changes.
  I can't use the &quot;classes&quot; prop of a component to override the styles.
  <code>className={classes.previewButton}</code></p>
  <p>SomeComponent.js</p>
  <pre><code>import { Button } from &quot;@material-ui/core&quot;;
  import classes &quot;../../styles/globalStyle.module.scss&quot;;
  
  
  
            {imageObj?.map((el, index) =&gt; (
              &lt;Button
               className={classes.previewButton}
                key={el.id}
                onClick={() =&gt; setSelectedImage(index)}
              &gt;
                &lt;img className='imageButton' src={el.url} alt={el.imgName} /&gt;
              &lt;/Button&gt;
            ))}
  </code></pre>
  <p>globalStyle.module.scss</p>
  <pre><code>.previewButton {
    border-radius: 10px;
    border: 1px solid #dcdcdc;
    margin-right: 7px;
    margin-bottom: 7px;
    opacity: 0.6;
  
    &amp;:hover {
      border: 1px solid #3f51b5;
      opacity: 1;
    }
  }
  </code></pre>
  <p>Maybe I missed something? Any help will help!</p>