title: How to add custom MUI palette colors
body: <p>I'm trying to establish my own palette colors to match my branding in MUI. So far I can only get the primary and secondary colors to work when applied as the background color to buttons. When I add my own variable names, like use &quot;accent&quot; as shown as an example from MUI's website, the button defaults to grey.</p>
  <p>Here is my <em>MyTheme.js</em> code:</p>
  <pre><code>import { createMuiTheme } from 'material-ui/styles';
  import purple from 'material-ui/colors/purple';
  
  export default createMuiTheme({
      palette: {
          primary: { // works
            main: '#165788',
            contrastText: '#fff',
          },
          secondary: { // works
            main: '#69BE28',
            contrastText: '#fff',
          },
          companyBlue: { // doesn’t work - defaults to a grey button
              main: '#65CFE9',
              contrastText: '#fff',
          },
          companyRed: { // doesn’t work - grey button
              main: '#E44D69',
              contrastText: '#000',
          },
          accent: { // doesnt work - grey button
              main: purple, // import purple doesn’t work
              contrastText: '#000',
          },
      },
  });
  </code></pre>
  <p>Here is my <em>App.js</em> code:</p>
  <pre><code>import React, { Component } from 'react';
  import Button from 'material-ui/Button';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import MyTheme from './MyTheme';
  import './App.css';
  import { withStyles } from 'material-ui/styles';
  import PropTypes from 'prop-types';
  
  
  const styles = theme =&gt; ({
    button: {
      margin: theme.spacing.unit,
    },
    input: {
      display: 'none',
    },
  });
  
  
  class App extends Component {
    constructor(props)
    {
      super(props);
    }
  
    render() {
      const { classes } = this.props;
      return (
        &lt;MuiThemeProvider theme={MyTheme}&gt;
            &lt;Button variant=&quot;raised&quot; &gt;
            Default
            &lt;/Button&gt;
            &lt;Button variant=&quot;raised&quot; color=&quot;primary&quot; className={classes.button}&gt;
            Primary
            &lt;/Button&gt;
            &lt;Button variant=&quot;raised&quot; color=&quot;secondary&quot; className={classes.button}&gt;
            Secondary
            &lt;/Button&gt;
            &lt;Button variant=&quot;raised&quot; color=&quot;companyRed&quot; className={classes.button}&gt;
            Company Red
            &lt;/Button&gt;
            &lt;Button variant=&quot;raised&quot; color=&quot;accent&quot; className={classes.button}&gt;
            Accent
            &lt;/Button&gt;
        &lt;/MuiThemeProvider&gt;
        );
    }
  }
  
  App.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(App);
  </code></pre>