title: How do I change the Material-UI AppBar background colour?
body: <p>I'm creating an app using Material-UI components, and have changed the colours in the theme as follows (in src/index.js):</p>
  <pre><code>const theme = createMuiTheme({
    palette: {
      pale: {
          main: '#FCF4D9',
          contrastText: '#383838'
      }
    }
  })
  
  ReactDOM.render(
   &lt;ThemeProvider theme={theme}&gt;
     &lt;App /&gt;
   &lt;/ThemeProvider&gt;,
   document.getElementById('root'))
  </code></pre>
  <p>Then, in one of my components I want to use this to make the app bar have a pale background.  I'm trying to do this as follows (src/Header/index.js):</p>
  <pre><code>const Header = () =&gt; {
  
    const theme = useTheme()
    
    return (
      &lt;AppBar position=&quot;fixed&quot; className=&quot;appBar&quot; color={`${theme.palette.pale}`}&gt;
        ...
      &lt;/AppBar&gt;
    )
  }
  </code></pre>
  <p>This isn't working - the background just comes out as white.  If I rename &quot;pale&quot; to &quot;primary&quot; and then use</p>
  <pre><code>color=&quot;primary&quot;
  </code></pre>
  <p>that works fine, but I already have another colour called &quot;primary&quot; so I can't do it that way.</p>
  <p>I suspect that I'm doing the template literal wrongly, but I'm not sure - I've tried various other combinations of brackets, $ sign etc, but this is the only one that compiles. Or is it that I can only use &quot;primary&quot; and &quot;secondary&quot; in there, and not a theme property?  If so, how do I use the theme property?</p>