[英]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.