title: MaterialUI Button Could not override style
body: <p>Could not override the style using <code>className</code> on a <code>Button</code>. The same style works correctly on a <code>TextField</code>. Using <code>style</code> prop allows to override <code>Button</code> style.
  What am I missing?</p>
  <p>Issue link: <a href="https://codesandbox.io/s/bold-dewdney-r6y8u" rel="nofollow noreferrer">https://codesandbox.io/s/bold-dewdney-r6y8u</a></p>
  <p><em><strong>Same Code</strong></em>:</p>
  <pre><code>import React from &quot;react&quot;;
  import { Button, TextField } from &quot;material-ui&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  
  const useStyles = makeStyles((theme) =&gt; ({
    buttonStyle: {
      backgroundColor: &quot;#ADD8E6&quot;
    }
  }));
  
  const App = () =&gt; {
    const classes = useStyles();
  
    return (
      &lt;div&gt;
        &lt;Button className={classes.buttonStyle}&gt;Failed Submit&lt;/Button&gt;
        &lt;Button style={{ backgroundColor: &quot;#CACACA&quot; }}&gt;Working Submit&lt;/Button&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;TextField className={classes.buttonStyle} label=&quot;Name&quot; /&gt;
      &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>