title: Can't override Fab disabled color material - ui
body: <p>Not able to change the style of the disabled button. I tried the ways discussed here <a href="https://github.com/mui-org/material-ui/issues/13779" rel="nofollow noreferrer">https://github.com/mui-org/material-ui/issues/13779</a>  </p>
  
  <p>Mui version - </p>
  
  <p>"@material-ui/core": "3.8.1",</p>
  
  <p>"@material-ui/icons": "3.0.1",</p>
  
  <pre><code>           const styles = theme =&gt; ({
                fabButton: {
                   boxShadow: 'none',
                   backgroundColor: '#fff', 
                },
                disabled: {
                   backgroundColor: '#fff', 
                },
               icon: {
                  width: '20px', 
                   height: '20px', 
                   color: grey[600],
                 },
              });
  
  
            &lt;Hint title="Previous"&gt;
                &lt;Fab 
                  size="small" 
                  classes={{
                    root: classes.fabButton,
                    disabled: classes.disabled
                  }}
                  disabled={true}
                  component="div"
                  onClick={onClickHandle}
                &gt;
                  &lt;IconChevronLeft className={classes.icon} /&gt;
                &lt;/Fab&gt;
              &lt;/Hint&gt;
  </code></pre>
  
  <p>OR </p>
  
  <pre><code>
             const styles = theme =&gt; ({
                fabButton: {
                   boxShadow: 'none',
                   backgroundColor: '#fff', 
                   '&amp;:disabled': {
                        backgroundColor: '#fff',   
                   }
                },
                icon: {
                   width: '20px', 
                   height: '20px', 
                   color: grey[600],
                 },
              });
  
  
            &lt;Hint title="Previous"&gt;
                &lt;Fab 
                  size="small" 
                  className={classes.fabButton}
                  disabled={true}
                  component="div"
                  onClick={onClickHandle}
                &gt;
                  &lt;IconChevronLeft className={classes.icon} /&gt;
                &lt;/Fab&gt;
              &lt;/Hint&gt;
  
  </code></pre>
  
  <p>In both ways <code>disabled</code> custom styles are not applying instead,  taking the default style. Any help would be appreciated.</p>
  
  <p>Please check the demo here </p>
  
  <p><a href="https://codesandbox.io/s/material-demo-rh06m" rel="nofollow noreferrer">https://codesandbox.io/s/material-demo-rh06m</a></p>