title: Creating MUI v5 theme, how can I override the colors of the AppBar's children components?
body: <h2>I've been using this Material-UI Theme Creator tool to put together a MUI theme that I like:
  <a href="https://bareynol.github.io/mui-theme-creator/" rel="nofollow noreferrer">mui-theme-creator</a></h2>
  <p>This tool is using Material UI version 4 I believe, while in my project I'm using @mui/material version 5.2.1, and I'm trying to figure out how I can &quot;convert&quot; the code from the theme-creator to a version compatible with version 5.</p>
  <h2>Now, here's the theme code from the Theme Creator:</h2>
  <pre><code>import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme'
  export const themeOptions: ThemeOptions = {
    palette: {
      type: 'dark',
      primary: {
        main: '#ff3d00',
      },
      secondary: {
        main: '#2962ff',
      },
    ...........
    props: { // Is there a way to do anything like this with Mui v5?
      MuiAppBar: {
        color: 'inherit',
      },
    },
    overrides: {
      MuiAppBar: {
        colorInherit: {
          backgroundColor: '#303030',
          color: '#fff',
        },
      },
    },
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/IC9RZ.png" rel="nofollow noreferrer">Screenshot of the AppBar using the above ThemeOptions code</a></p>
  <h2>Now, while I've done my best to try and convert this code to v5 and replicate it's effects, I'm having one main issue. This is the relevant code I've got so far:</h2>
  <pre><code>import { createTheme } from '@mui/material/styles'
  export const theme = createTheme({
    mode: 'dark',
    palette: {
      primary: {
        main: '#ff3d00',
      },
      secondary: {
        main: '#2962ff',
      },
    ..............
    components: {
      MuiAppBar: {
        styleOverrides: {
          colorPrimary: {
            backgroundColor: '#303030',
            color: '#ffffff',
          },
        },
      },
    },
  })
  </code></pre>
  <p>The main issue I'm having is that, while the AppBar <em>does</em> change it's background color, I can't seem to find an option using createTheme that will change the color of the child elements inside the AppBar.</p>
  <p>If there's no way to do it like in version 4 would it best if I just create a theme based on the main theme I've already created and use it solely for theming my Navbar component?</p>