[英]How to make Make AppBar background colour consistent with navigation bar color
我在更改<AppBar>
背景颜色时遇到问题。 我正在使用Container
组件来设置最大屏幕尺寸。
当屏幕尺寸大于最大屏幕尺寸时,这会导致问题。 AppBar
背景颜色预计其余为白色。
如何删除白色并使其与<AppBar>
背景色相匹配?
如何让白色与<AppBar>
颜色相匹配,以便导航看起来一致?
这是我到目前为止:
import React from 'react';
import {CssBaseline, Container} from '@material-ui/core/';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}));
export default function ButtonAppBar() {
const classes = useStyles();
return (
<div className={classes.root}>
<CssBaseline />
<Container maxWidth="sm">
<AppBar position="static">
<Toolbar>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Container>
</div>
);
}
我错过了什么?
导航看起来是连线的,因为它被白色包围。
您可以进入您的 css 文件并添加:
body {
background-color: #FF0000;
}
将AppBar
放在具有root
类的div
之外,或者从root
类中移除width
。
添加:
<div>
<AppBar position="static">
<Toolbar style={{ maxWidth: 1280 }}>
// ...
</Toolbar>
</AppBar>
<Container>
// ...
</Container>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.