I have the following:
I just wannt to change background color( only page home), but I' cant, look at the picture, this's code:
app.js
const theme = createTheme({
typography: {
h1: {
fontSize: "3rem",
color: "white"
},
h4: {
color: "white"
},
textMSG:{
fontSize: "3rem",
fontFamily: ['Estonia', 'cursive'].join(","),
color: "white"
}
},
palette: {
type: "light",
primary: {
main: indigo[900],
light: '#ff7961',
dark: '#ba000d',
},
backgroundHome:{
paper: "#000000",
},
secondary: {
main: orange[900]
},
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<Container>
<Header />
</Container>
</ThemeProvider>
);
}
export default App
home.js
const Home = () => {
const classes = useStyles();
const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
return (
<Paper style={{ background: 'black' }}>
</Paper>
);
};
export default Home;
header.js
const Header = (props) => {
const classes = useStyles();
const [anchor, setAnchor] = React.useState(null);
const open = Boolean(anchor);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
const handleMenu = (event) => {
setAnchor(event.currentTarget);
};
return (
<div className={classes.root}>
<HideOnScroll {...props}>
<BrowserRouter>
<AppBar>
<Toolbar>
<Typography
variant="h5"
component="p"
color="white"
className={classes.title}
>
<img src={Logo} alt="Logo" style={{width:'3rem', margin: 'auto'}} />
</Typography>
{isMobile ? (
<>
<IconButton
style={{ color: 'white' }}
className={classes.menuButton}
edge="start"
aria-label="menu"
onClick={handleMenu}
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchor}
anchorOrigin={{
vertical: "top",
horizontal: "right"
}}
KeepMounted
transformOrigin={{
vertical: "top",
horizontal: "right"
}}
open={open}
>
<MenuItem
onClick={() => setAnchor(null)}
component={Link}
to="/"
color="black"
>
<ListItemIcon >
<HomeIcon />
</ListItemIcon>
<Typography variant="h6" color="black"> Home</Typography>
</MenuItem>
<MenuItem
onClick={() => setAnchor(null)}
component={Link}
to="/Personal"
>
<ListItemIcon>
<BookmarksIcon />
</ListItemIcon>
<Typography variant="h6" color="black"> Personal </Typography>
</MenuItem>
<MenuItem
onClick={() => setAnchor(null)}
component={Link}
to="/College"
>
<ListItemIcon>
<SchoolIcon />
</ListItemIcon>
<Typography variant="h6" color="black"> College </Typography>
</MenuItem>
<MenuItem
onClick={() => setAnchor(null)}
component={Link}
to="/Skills"
>
<ListItemIcon>
<CodeOutlinedIcon />
</ListItemIcon>
<Typography variant="h6" color="black"> Skills</Typography>
</MenuItem>
<MenuItem
onClick={() => setAnchor(null)}
component={Link}
to="/Briefcase"
>
<ListItemIcon>
<BusinessCenterOutlinedIcon />
</ListItemIcon>
<Typography variant="h6" color="black"> Briefcase</Typography>
</MenuItem>
<MenuItem
onClick={() => setAnchor(null)}
component={Link}
to="/About"
>
<ListItemIcon>
<ContactPhoneIcon />
</ListItemIcon>
<Typography variant="h6" color="black"> Contact</Typography>
</MenuItem>
</Menu>
</>
) : (
<div style={{ marginRight: "2rem" }}>
<Button
className={classes.menuButtonDesktop}
variant="text"
component={Link}
to="/"
>
<HomeIcon style={{ color: 'white' }}/>
<Typography variant="text" style={{ color: 'white', marginLeft: '0.2rem' }} > Home </Typography>
</Button>
<Button
className={classes.menuButtonDesktop}
variant="text"
component={Link}ss
to="/Personal"
color="white"
>
<BookmarksIcon style={{ color: 'white' }}/>
<Typography variant="text" style={{ color: 'white', marginLeft: '0.2rem' }} > Personal </Typography>
</Button>
<Button
className={classes.menuButtonDesktop}
variant="text"
component={Link}
to="/College"
color="white"
>
<SchoolIcon style={{ color: 'white' }}/>
<Typography variant="text" style={{ color: 'white', marginLeft: '0.2rem' }} > College </Typography>
</Button>
<Button
className={classes.menuButtonDesktop}
variant="text"
component={Link}
to="/Skills"
color="white"
>
<CodeOutlinedIcon style={{ color: 'white' }}/>
<Typography variant="text" style={{ color: 'white', marginLeft: '0.2rem' }} > Skills </Typography>
</Button>
<Button
className={classes.menuButtonDesktop}
variant="text"
component={Link}
to="/Briefcase"
color="white"
>
<BusinessCenterOutlinedIcon style={{ color: 'white' }}/>
<Typography variant="text" style={{ color: 'white', marginLeft: '0.2rem' }} > Briefcase </Typography>
</Button>
<Button
variant="text"
component={Link}
to="/About"
color="white"
>
<ContactPhoneIcon style={{ color: 'white' }}/>
<Typography variant="text" style={{ color: 'white', marginLeft: '0.2rem' }} > Contact </Typography>
</Button>
</div>
)}
</Toolbar>
</AppBar>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/Personal" component={Personal} />
<Route exact path="/College" component={College} />
<Route exact path="/Skills" component={Skills} />
<Route exact path="/Briefcase" component={Briefcase} />
<Route exact path="/About" component={About} />
</Switch>
</BrowserRouter>
</HideOnScroll>
</div>
);
};
export default Header;
so, this's the problem, I am trying to setting background color black, to page home, but the color is taking it only a par, and I just want to setting all page home.