title: Material-UI: how to access all palette shades inside component
body: <p>To customize my Material UI palette, I've done something like this to set up my theme:</p>
  <pre><code>import blue from '@material-ui/core/colors/blue';
  
  const theme = createMuiTheme({
    palette: {
      primary: blue,
    },
  });
  </code></pre>
  <p><code>blue</code> contains many shades, as shown below:</p>
  <p><a href="https://i.stack.imgur.com/vodpc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vodpc.png" alt="enter image description here" /></a></p>
  <p>Now how do I access all the shades of <code>primary</code> palette inside of my component? Accessing all the shades of <code>palette.grey</code> is easy as shown below:</p>
  <p><a href="https://i.stack.imgur.com/SktSu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SktSu.png" alt="enter image description here" /></a></p>
  <p>But I can't seem to access the shades of <code>primary</code> other than <code>main</code>, <code>dark</code>, <code>light</code>, and <code>contrastColor</code>, as shown below:</p>
  <p><a href="https://i.stack.imgur.com/dZVpO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dZVpO.png" alt="enter image description here" /></a></p>
  <p>How do I access all the shades (e.g. <code>theme.palette.primary.A100</code>) from my component?</p>