title: Material UI 5 class name styles
body: <p>I migrated from Mui 4 to 5 and wonder how to use class names. If I want to apply certain styles to just one component there is the SX property. However, I'm struggling with using the same class for multiple components. In v4 my code looked like this:</p>
  <pre class="lang-ts prettyprint-override"><code>export const useStyles = makeStyles((theme: Theme) =&gt;
    createStyles({
      root: {
        padding: theme.spacing(1),
        margin: 'auto',
      },
    })
  )
  </code></pre>
  <p>I could import this <code>useStyles</code> hook in any component and use it like this:</p>
  <pre class="lang-jsx prettyprint-override"><code>const classes = useStyles()
  ...
  &lt;div className={classes.root}&gt;...&lt;/div&gt;
  </code></pre>
  <p>This docs say, that I can 'override styles with class names', but they don't tell how to do it:
  <a href="https://mui.com/customization/how-to-customize/#overriding-styles-with-class-names" rel="noreferrer">https://mui.com/customization/how-to-customize/#overriding-styles-with-class-names</a></p>
  <p>Do I have to put these styles in an external CSS file?</p>
  <pre class="lang-css prettyprint-override"><code>.Button {
    color: black;
  }
  </code></pre>
  <p>I would rather define the styles in my ts file.</p>
  <p>I also found this migration guide:
  <a href="https://next.material-ui.com/guides/migration-v4/#migrate-makestyles-to-emotion" rel="noreferrer">https://next.material-ui.com/guides/migration-v4/#migrate-makestyles-to-emotion</a></p>
  <p>I don't like approach one, because using this Root wrapper, it is inconvenient to apply a class conditionally. (Especially for typescript there is some overhead) Approach two comes with an external dependency and some boilerplate code.</p>
  <p>Ideally I would use styles like this, perhaps with one rapper function around the styles object:</p>
  <pre class="lang-js prettyprint-override"><code>export const root = {
    padding: theme.spacing(1),
    margin: 'auto',
  }
  
  &lt;div className={root}&gt;...&lt;/div&gt;
  </code></pre>
  <p>Of course, the last approach doesn't work, because className wants a string as input. Does anybody know an alternative with little boilerplate code?</p>