title: Material-UI Color Prop Options
body: <p>I currently have the following theme using material-ui:</p>
  <pre><code>import { createMuiTheme } from &quot;@material-ui/core/styles&quot;;
  import { blue, green } from &quot;@material-ui/core/colors&quot;;
  
  const theme = createMuiTheme({
    palette: {
      primary: blue,
      secondary: green,
    },
  });
  
  export default theme;
  </code></pre>
  <p>Now, if I do a <code>console.log</code> of the <code>green</code> object that I import from material-ui colors, I get a color object like this:</p>
  <pre><code>green = {
    50: &quot;#e8f5e9&quot;
    100: &quot;#c8e6c9&quot;
    200: &quot;#a5d6a7&quot;
    300: &quot;#81c784&quot;
    400: &quot;#66bb6a&quot;
    500: &quot;#4caf50&quot;
    600: &quot;#43a047&quot;
    700: &quot;#388e3c&quot;
    800: &quot;#2e7d32&quot;
    900: &quot;#1b5e20&quot;
    A100: &quot;#b9f6ca&quot;
    A200: &quot;#69f0ae&quot;
    A400: &quot;#00e676&quot;
    A700: &quot;#00c853&quot;
  }
  </code></pre>
  <p>As such, I thought I could style my <code>AppBar</code> component as follows:  <code>&lt;AppBar color=&quot;secondary.800&quot;&gt;</code>.</p>
  <p>This, however, does not work.  I also tried: <code>&lt;AbbBar color=&quot;secondary[800]&quot;&gt;</code> and that also does not work.</p>
  <p>I have even tried this variation with the theme:</p>
  <pre><code>import { createMuiTheme } from &quot;@material-ui/core/styles&quot;;
  import { blue, green } from &quot;@material-ui/core/colors&quot;;
  
  const theme = createMuiTheme({
    palette: {
      primary: blue,
      secondary: {...green},
    },
  });
  
  export default theme;
  </code></pre>
  <p>This also does not work.</p>
  <p>Is there a way for me to access the different color variations in the <code>green</code> color object vis-a-vis the <code>color</code> prop in the <code>AppBar</code> component?</p>
  <p>If so, how?</p>
  <p>Thanks.</p>