Material-UI: AppBar не использует цвет, определенный в теме

Question

Я создал тему на этом сайте:

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

Мне нужно, чтобы основной цвет был КРАСНЫМ, а вторичный СИНИЙ. Но мне нужно, чтобы AppBar был серым. В предварительном просмотре AppBar использует нужный мне цвет:

Сгенерированный код выглядит следующим образом:

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>
  );
}

Но AppBar всегда принимает основной цвет. Если я установлю его по умолчанию, теперь он белый. Мне никогда не нужен серый серый.

Я создал этот код для песочницы, чтобы проверить эту тему:

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

Любая помощь будет принята с благодарностью! Спасибо

Answer 1

Что ж, после некоторого теста кажется, что если вы поместите стиль непосредственно в элемент AppBar, он будет работать: https://codesandbox.io/s/material-ui-themes-izlou

также кажется, что если вы измените гекса primary: { main: '#f44336' } значение, это меняет цвет фона вашего appBar