How to change color of AppBar?-CodePudding

const useStyles = makeStyles({
  navbar: {
    colorPrimary: "#FFFFFF",
  },
});

const Login = () => {
  const classes = useStyles();
  return (
    <AppBar position="sticky" classes={classes.navbar}>
      <Toolbar>
        <h1>Test</h1>
      </Toolbar>
    </AppBar>
  );
};

Hello I am kind of a beginner to MaterialUI, how can I change the background color of the AppBar?

CodePudding user response：

<AppBar style={{ background: '#hexcode' }}> this is the syntax to change the color of the AppBar component. hope this helps!

CodePudding user response：

At useStyles, you should use backgroundColor to instead of colorPrimary. You can try my code below.

const useStyles = makeStyles({
  navbar: {
    backgroundColor: "#FFFFFF !important",
  },
});