title: Material-ui makeStyles overwritten by default
body: <p>I am trying to override pseudo-classes in Stepper component using <strong>makeStyles</strong>:</p>
  <pre><code>const useStyles = makeStyles((theme) =&gt; ({
    active: {
      color: theme.palette.primary.main,
    },
    completed: {
      color: theme.palette.goodyear.status.positive,
    },
    root: {
      color: theme.palette.goodyear.grey.medium,
      fontWeight: 500,
    },
    text: {
      color: theme.palette.text.titles,
    },
    iconContainer: {
      transform: 'scale(1.667)',
    },
    label: {
      fontSize: '1.2rem',
      fontWeight: 500,
    },
  }));
  
  const StepLabel = (props) =&gt; {
    const classes = useStyles();
  
    return (
      &lt;MaterialStepLabel
        classes={{
          iconContainer: classes.iconContainer,
          label: classes.label,
        }}
        StepIconProps={{
          classes: {
            active: classes.active,
            completed: classes.completed,
            root: classes.root,
            text: classes.text,
          },
        }}
        {...props}
      /&gt;
    );
  };
  </code></pre>
  <p>Unfortunately in the browser the results look like that:</p>
  <p><a href="https://i.stack.imgur.com/K42a9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K42a9.png" alt="screenshot of app" /></a></p>
  <p>The classes that were created by makeStyles are there, but are overridden by default because it's more specific? You can also see that the completed class is also below the root class, which would be strange, since root is the element in general state, and the completed pseudo should override that styles.</p>
  <p>What could be the problem here and how should I use that classes correctly?</p>