title: How to use 'classes' to customize compound components in Mui?
body: <p>I am trying to override the Mui styles by using the <code>classes</code> prop.</p>
  <p>For example, I would like to override the <a href="https://mui.com/api/input-label/#css" rel="nofollow noreferrer">InputLabel</a> color of the <a href="https://mui.com/api/text-field/" rel="nofollow noreferrer">TextField</a> component.</p>
  <p>I would like to use one definition of <code>makeStyles</code> that will set all css rules, starting at the root (TextField) and overriding whatever I want in the hierarchy (for example, the InputLabel when focused), when passing it to the component in the <code>classes</code> prop.</p>
  <p>How is it done?</p>
  <pre><code>import * as React from &quot;react&quot;;
  import TextField from &quot;@mui/material/TextField&quot;;
  import makeStyles from &quot;@mui/styles/makeStyles&quot;;
  
  const useStyles = makeStyles({
    root: {
      color: &quot;yellow&quot;,
      label: {
        color: &quot;brown&quot;
      }
    }
  });
  export default function Input() {
    const classes = useStyles();
    return (
      &lt;TextField
        classes={classes}
        id=&quot;outlined-basic&quot;
        label=&quot;Outlined&quot;
        variant=&quot;outlined&quot;
      /&gt;
    );
  }
  </code></pre>
  <p><strong>Answer</strong></p>
  <pre><code>     import * as React from &quot;react&quot;;
       import TextField from &quot;@mui/material/TextField&quot;;
       import makeStyles from &quot;@mui/styles/makeStyles&quot;;
          
          const useStyles = makeStyles({
            root: {
               &quot;&amp; .MuiInputBase-input&quot;: {
                color: 'red',
                padding: &quot;0.2rem&quot;
                 },
            },
          });
          export default function Input() {
            const classes = useStyles();
            return (
              &lt;TextField 
               InputProps={{ classes }} 
               /&gt;;
             
            );
          }
  </code></pre>
  <p><a href="https://codesandbox.io/s/mui-theme-forked-ud5b5?file=/src/Input.tsx" rel="nofollow noreferrer">codesandbox</a></p>