title: React Material UI: How to give a button a custom color when disabled?
body: <p>I'm building a React App using Material UI. </p>
  
  <p>If the button is disabled, it is grey and opaque. I'd like it to be in my themes primary color and opaque.</p>
  
  <p>So here is what I tried:</p>
  
  <pre><code>import React from "react";
  import PropTypes from "prop-types";
  import { withStyles } from "@material-ui/core/styles";
  import Button from "@material-ui/core/Button";
  
  const styles = theme =&gt; ({
    button: {
      ":disabled": {
        backgroundColor: theme.palette.primary || 'red'
      }
    }
  });
  
  function ContainedButtons(props) {
    const { classes } = props;
    return (
      &lt;div&gt;
        &lt;Button
          variant="contained"
          color="secondary"
          disabled
          className={classes.button}
        &gt;
          Disabled
        &lt;/Button&gt;
      &lt;/div&gt;
    );
  }
  
  ContainedButtons.propTypes = {
    classes: PropTypes.object.isRequired
  };
  
  export default withStyles(styles)(ContainedButtons);
  </code></pre>
  
  <p>But the button stays grey. How can you change the style of a disabled element? </p>