I am attempting to create a black navbar in react. Here is my code so far:
import UploadIcon from "@mui/icons-material/Upload";
import CustomButton from "./CustomButton";
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import {createMuiTheme} from '@material-ui/core/styles'
const Header = () => {
return (
<AppBar sx = {{color:'black'}}
position="sticky">
<Toolbar variant="dense">
<CustomButton
text='Upload' endIcon={<UploadIcon/>}/>
</Toolbar>
</AppBar>
)
}
export default Header;
The techniques that I have tried so far to change the color of my appbar have been solutions proposed here: https://smartdevpreneur.com/setting-material-ui-appbar-color-and-styling/#Method_1_Styling_AppBar_With_Classes
All previous threads I've seen in stack overflow about this have also not helped me. How do I change the color of my navbar ?
Styling the toolbar instead of styling the appbar worked. Here is my final code
import UploadIcon from "@mui/icons-material/Upload";
import CustomButton from "./CustomButton";
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import {createMuiTheme} from '@material-ui/core/styles'
const Header = () => {
return (
<AppBar
position="sticky">
<Toolbar
sx = {{background:'black',}}
variant="dense">
<CustomButton
text='Upload'
endIcon={<UploadIcon/>}/>
</Toolbar>
</AppBar>
)
}
export default Header;