Why header show blue color using material UI?

Question

Could you please tell me Why header show blue color ? I already try to change theme colour but it not work .I am expecting “Red” color

using from this link https://material-ui.com/demos/app-bar/ here is my code 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

For <MuiThemeProvider>, you are passing the prop muiTheme={theme}. This is incorrect. You should be using prop theme, like so:

<MuiThemeProvider theme={theme}>

Your code sandbox, after a quick edit to the prop name, looked like this:

The Material-UI Themes documentation shows some helpful examples, where you can view the source code to see how to use them in your React app.

Answer 2

Here is the updated code. https://codesandbox.io/s/w0xrmpy1m8

Only mistake was <MuiThemeProvider theme={theme}> expected theme for props instead of muiTheme which you had provided