React MUI V5 AppBar Background color not changing

user_15069288 0
Viewed 1217
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.

material-ui reactjs
2 Answers

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.

user_150692880

@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'}}>
user_144560500
Related