title: Can you overwrite styles in Material UI using css/scss?
body: <p>At the moment I'm using SCSS, as it is easy to use with NextJS. I really like how this system works, using the SCSS modules, and so I would also like to use it when using Material-UI. Material-UI uses JSS, which is a lot of boilerplate to write every time. Additionally, I prefer not to work with two ways of styling (SCSS modules and JSS). I already changed the order of CSS injection, so that I can use my SCSS modules on Material-UI components. However, I'm wondering if there is a way to overwrite styles of Material-UI components using SCSS modules? I have tried the following and a few similar things, but nothing seemed to work:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import styles from "./Login.module.scss";
  
  import Button from "@material-ui/core/Button";
  
  function Login() {
    return (
      &lt;section&gt;
          &lt;Button className={styles.button} variant="contained" color="primary"&gt;
            Verify
          &lt;/Button&gt;
      &lt;/section&gt;
    );
  }
  
  export default Login;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.button {
    padding: 10px;
    margin-bottom: 10px;
    .MuiButton-containedPrimary {
      border: 2px solid red;
      background-color: red;
    }
  }</code></pre>
  </div>
  </div>
  </p>