import React from 'react';
import { AppBar,Typography,Toolbar, makeStyles } from '@mui/material';
const useStyles = makeStyles({
appbar:{
backgroundColor:'#000000',
}
})
const Navbar = () => {
const classes = useStyles();
return (
<AppBar className={classes.appbar}>
<Toolbar>
</Toolbar>
</AppBar>
);
}
export default Navbar;
I am trying to change the default color of the appbar but this is not working , i tried using the char value of the color in place of the hex but that was also not working . Can anyone tell me whats wrong in this ? And yes , i am using the v5.4.3 of material-ui in this
You can do a one-off customization of a component with the sx-prop:
import * as React from "react";
import AppBar from "@mui/material/AppBar";
export default function ButtonAppBar() {
return (
<AppBar position="static" sx={{ color: "red", bgcolor: "black" }}>
Content
</AppBar>
);
}
You may also be interested in MUI's color system.