React MUI V5 AppBar Background color not changing-CodePudding

import React from "react";
import {
  AppBar,
  Toolbar,
  Grid,
  IconButton,
  InputBase,
  Badge,
} from "@mui/material";
import {
  ChatBubbleOutline,
  NotificationsNone,
  PowerSettingsNew,
} from "@mui/icons-material";
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles({
  root: {
    backgroundColor: "#fff",
  },
});

const Header = () => {
  const classes = useStyles();
  return (
    <AppBar position="static" className={classes.root}>
      <Toolbar>
        <Grid container>
          <Grid item>
            <InputBase />
          </Grid>
          <Grid item sm>
            helo
          </Grid>
          <Grid item>
            <IconButton>
              <Badge badgeContent={4} color="secondary">
                <NotificationsNone />
              </Badge>
            </IconButton>
            <IconButton>
              <Badge badgeContent={3} color="primary">
                <ChatBubbleOutline />
              </Badge>
            </IconButton>
            <IconButton>
              <PowerSettingsNew />
            </IconButton>
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>
  );
};

export default Header;

I am styling using "makeStyles" but it doesnt seem working in changing the background color of appbar. App bar is mui component from v5 (latest version). I donno why it is not changing. I am new to MUI. Someone please help me.

I can use inline "style" and its working in this way. But i need to do using makeStyles approach.

Note: I am using latest version of mui and I donno why it is not changing.

CodePudding user response：

@mui/styles is not compatible with React.StrictMode (which is in index.js) or React 18. please try to remove React.StrictMode first and then try it. or second option is that try it like this:

<AppBar position="static" style={{backgroundColor: '#fff'}}>

CodePudding user response：

This is in latest MUI v5.

The problem is that @mui/styles is not compatible with React.StrictMode or React 18. So, we need to wrap our root "App" component in the index.js file with "StyledEngineProvider" with injectFirst set to True.

import { StyledEngineProvider } from "@mui/material/styles";

ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <App />
  </StyledEngineProvider>,

  document.getElementById("root")
);

Then it will work.