为什么标题使用实质性用户界面显示为蓝色？

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

对于<MuiThemeProvider>，您正在传递道具muiTheme={theme}。这是不正确的。您应该像这样使用道具theme：

<MuiThemeProvider theme={theme}>

在快速修改道具名称后，您的代码沙箱如下所示：

Material-UI Themes documentation显示了一些有用的示例，您可以在其中查看源代码以了解如何在React应用中使用它们。

Answer 2

这是更新的代码。 https://codesandbox.io/s/w0xrmpy1m8

只有错误是<MuiThemeProvider theme={theme}> 预期theme用于道具而不是 您提供的muiTheme