Почему заголовок отображается синим цветом с использованием пользовательского интерфейса материала?

Question

Не могли бы вы сказать мне, почему заголовок показывает синий цвет?Я уже пытаюсь изменить цвет темы, но он не работает. Я ожидаю «Красный» цвет

, используя эту ссылку https://material -ui.com / demos / app-bar / здесьмой код https://codesandbox.io/s/7191w73nxx

 <div className="App">
        <MuiThemeProvider muiTheme={theme}>
          <AppBar position="static" color="primary" className="app-header">
            <Toolbar>
              <Typography variant="h6" color="inherit">
                Photos
              </Typography>
            </Toolbar>
          </AppBar>
        </MuiThemeProvider>
      </div>

Answer 1

Вот обновленный код.https://codesandbox.io/s/w0xrmpy1m8

Единственная ошибка была <MuiThemeProvider theme={theme}> ожидаемой theme для реквизита вместо muiTheme, которую вы предоставили

Answer 2

Для <MuiThemeProvider> вы передаете опору muiTheme={theme}.Это неверноВы должны использовать prop theme, например так:

<MuiThemeProvider theme={theme}>

Ваша песочница для кода после быстрого редактирования названия реквизита выглядела так:

Документация Material-UI Themes показывает несколько полезных примеров, где вы можете просмотреть исходный код и узнать, как его использовать в приложении React.