title: What are the required styles for a Material UI palette?
body: <p>I have some components that use the <code>MuiThemeProvider</code> to customize a button.  The reason is probably because you can only have <code>"primary"</code> or <code>"secondary"</code> instead of a custom palette name.  They look like this:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>import React from "react";
  import { badTheme } from "./Themes";
  import {
      Button,
      MuiThemeProvider,
  } from "@material-ui/core";
  
  class Widget extends React.Component {
      render() {   
          return (
              &lt;MuiThemeProvider theme={badTheme}&gt;
                  &lt;Button color="primary"&gt;Click me&lt;/Button&gt;
              &lt;/MuiThemeProvider&gt;
          );
      }
  }
  
  export default Widget;
  </code></pre>
  
  <p>The <code>badTheme</code> here is just the app theme with an override for <code>main</code> in the <code>primary</code> palette.</p>
  
  <pre class="lang-js prettyprint-override"><code>const badTheme= createMuiTheme({
      ...defaultTheme,
      palette: {
          ...defaultTheme.palette,
          primary: {
              main: "#2B368B",
          },
      },
  });
  </code></pre>
  
  <p>It would be nice to get rid of these little themes that just change a button, so I want to know what are all the styles I need to implement when switching to <code>withStyles</code>.</p>
  
  <p>I don't want to lose the ripple style or any other style I'm not aware of that is seeded from setting <code>main</code> in the palette.</p>
  
  <p>What does it take to replace <code>MuiThemeProvider</code> with <code>withStyles</code>, or whatever else, and having the exact same styles on this button that are seeded based on the <code>main</code> palette setting?</p>