material-ui：AppBar 未使用主题中定义的颜色

Question

I've created a theme using this site:

https://cimdalli.github.io/mui-theme-generator/

I need the primary color to be RED and the secondary BLUE. But I need the AppBar to be some of grey. In the preview the AppBar is using the color I need:

The code generated looks like this:

const theme = createMuiTheme({
  palette: {
    primary: { main: '#f44336' },
    secondary: { main: '#7b1fa2' }
  },
  appBar: {
    color:  '#bdbdbd' ,
  }
});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <div className="App">
        <AppBar position="fixed">
          <Toolbar />
        </AppBar>
      </div>
    </MuiThemeProvider>
  );
}

But the AppBar is always taking de primary color. If I set it to default now it's white. Never the grey grey I need.

I've made this codeSandbox to test this theme:

https://codesandbox.io/s/material-ui-themes-4inc1?file=/src/index.js

Any help would be appreciated! Thanks

Answer 1

Well after some test it seems that if you put the style directly to the AppBar element it works: https://codesandbox.io/s/material-ui-themes-izlou

it also seems that if you change the primary: { main: '#f44336' } hexa value, it does change the background color of your appBar