title: How to override classes using makeStyles and useStyles in material-ui?
body: <p>Consider a component that renders a button and says this button should have a red background and a yellow text color. Also there exists a Parent component that uses this child but says, the yellow color is fine, but I want the background color to be green.</p>
  
  <h2>withStyles</h2>
  
  <p>No problem using the old withStyles.</p>
  
  <pre><code>import React from "react";
  import { withStyles } from "@material-ui/core/styles";
  import { Button } from "@material-ui/core";
  
  const parentStyles = {
    root: {
      background: "green"
    }
  };
  const childStyles = {
    root: {
      background: "red"
    },
    label: {
      color: "yellow"
    }
  };
  
  const ChildWithStyles = withStyles(childStyles)(({ classes }) =&gt; {
    return &lt;Button classes={classes}&gt;Button in Child withStyles&lt;/Button&gt;;
  });
  
  const ParentWithStyles = withStyles(parentStyles)(({ classes }) =&gt; {
    return &lt;ChildWithStyles classes={classes} /&gt;;
  });
  
  
  export default ParentWithStyles;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/UL3Dr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UL3Dr.png" alt="Button in child using withStyles"></a></p>
  
  <p><a href="https://codesandbox.io/s/passing-classes-using-withstyles-w17xs?file=/demo.tsx" rel="noreferrer">https://codesandbox.io/s/passing-classes-using-withstyles-w17xs?file=/demo.tsx</a></p>
  
  <h2>makeStyles/useStyles</h2>
  
  <p>Let's try the makeStyles/useStyles instead and follow the guide <a href="https://material-ui.com/styles/advanced/#makestyles" rel="noreferrer">Overriding styles - classes prop</a> on material-ui.com.</p>
  
  <pre><code>import React from "react";
  import { makeStyles } from "@material-ui/styles";
  import { Button } from "@material-ui/core";
  
  const parentStyles = {
    root: {
      background: "green"
    }
  };
  const childStyles = {
    root: {
      background: "red"
    },
    label: {
      color: "yellow"
    }
  };
  
  // useStyles variant does NOT let me override classes
  const useParentStyles = makeStyles(parentStyles);
  const useChildStyles = makeStyles(childStyles);
  
  const ChildUseStyles = ({ classes: classesOverride }) =&gt; {
    const classes = useChildStyles({ classes: classesOverride });
    return (
      &lt;&gt;
        &lt;Button classes={classes}&gt;Button1 in Child useStyles&lt;/Button&gt;
        &lt;Button classes={classesOverride}&gt;Button2 in Child useStyles&lt;/Button&gt;
      &lt;/&gt;
    );
  };
  const AnotherChildUseStyles = props =&gt; {
    const classes = useChildStyles(props);
    return (
      &lt;&gt;
        &lt;Button classes={classes}&gt;Button3 in Child useStyles&lt;/Button&gt;
      &lt;/&gt;
    );
  };
  const ParentUseStyles = () =&gt; {
    const classes = useParentStyles();
    return &lt;&gt;
      &lt;ChildUseStyles classes={classes} /&gt;
      &lt;AnotherChildUseStyles classes={classes} /&gt;
    &lt;/&gt;
  };
  
  export default ParentUseStyles;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/OVkxQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OVkxQ.png" alt="enter image description here"></a></p>
  
  <p><a href="https://codesandbox.io/s/passing-classes-using-usestyles-6x5hf?file=/demo.tsx" rel="noreferrer">https://codesandbox.io/s/passing-classes-using-usestyles-6x5hf?file=/demo.tsx</a></p>
  
  <p>There seems no way to get the desired effect that I got using withStyles. A few questions, considering I still want the same effect (green button yellow text) using some method of classes overriding (which seemed to make sense to me before).</p>
  
  <ul>
  <li>How is my understanding wrong about how to pass classes as means to override parts of them using useStyles?</li>
  <li>How should I approach it alternatively?</li>
  <li>And if I'm using the wrong approach, why is material-ui still giving me a warning when the parent has something in the styles that the child doesn't have?
  
  <blockquote>
    <p>the key <code>something</code> provided to the classes prop is not implemented in [Child]</p>
  </blockquote></li>
  <li>Is the migration from the old approach (withStyles) vs the new approach documented somewhere?</li>
  </ul>
  
  <p>Btw, I'm aware of <a href="https://material-ui.com/styles/api/" rel="noreferrer">this solution</a> but that seems cumbersome when you have too much you want to override.</p>
  
  <pre><code>const useStyles = makeStyles({
    root: {
      backgroundColor: 'red',
      color: props =&gt; props.color, // &lt;-- this
    },
  });
  
  function MyComponent(props) {
    const classes = useStyles(props);
    return &lt;div className={classes.root} /&gt;;
  }
  </code></pre>