根据Material-ui,有3种解决方案。
https://material-ui.com/components/app-bar/#fixed-placement
- 您可以使用position =“ sticky”而不是固定的。 IE 11不支持⚠️sticky。
- 您可以渲染第二个组件
- 您可以使用theme.mixins.toolbar CSS
我个人喜欢使用第二种解决方案。
return (
<>
<AppBar position="fixed">
<Toolbar>{/* content */}</Toolbar>
</AppBar>
<Toolbar />
</>
);
,
之所以发生这种情况,是因为MaterialUI应用栏默认为position
。这将其与标准DOM的布局分开,以允许内容在其下面滚动,但是结果是页面上没有空间。
您可以通过以下方式解决此问题:将其下的所有内容包装在div中并指定足够的边距,或者更改<AppBar>
的{{1}}属性,使其不再为"fixed"
。在您的示例中,如果这只是<Box>
下面的唯一内容,您也可以将样式应用于<AppBar>
。
例如
import React from 'react';
import { AppBar,Typography,Box } from '@material-ui/core';
function App() {
return (
<div>
<AppBar>
<Typography variant='h3'>
AppBar
</Typography>
</AppBar>
<div style={{marginTop: 80px}}>
<Box>
<Typography variant='h1' style={{ border: '1px solid black' }}>
Hello
</Typography>
</Box>
</div>
</div>
)
}
export default App;
,
MaterialUI为可帮助的AppBar提供了一个主题混合。不确定是否使用推荐的JSS设置,但是可以执行以下操作:
import withStyles from '@material-ui/core/styles/withStyles';
const styles = theme => ({
appBarSpacer: theme.mixins.toolbar
});
const style = withStyles(styles)
function MyScreen ({ classes }) {
<AppBar></AppBar>
<div className={classes.appBarSpacer}></div>
<Box></Box>
}
export default style(MyScreen)
mixin将为该div提供与您的AppBar相同的高度,并向下推其他内容。
,
我认为最好的应用设置是可以的,但我建议以下
import React from "react";
import ReactDOM from "react-dom";
import {
AppBar,Box,CssBaseline,makeStyles,Container,Grid,Toolbar
} from "@material-ui/core";
const useStyles = makeStyles(theme => ({
content: {
flexGrow: 1,height: "100vh",overflow: "auto"
},appBarSpacer: theme.mixins.toolbar,title: {
flexGrow: 1
},container: {
paddingTop: theme.spacing(4),paddingBottom: theme.spacing(4)
}
}));
function App() {
const classes = useStyles();
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="absolute">
<Toolbar className={classes.toolbar}>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
className={classes.title}
>
AppBar
</Typography>
</Toolbar>
</AppBar>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<Container maxWidth="lg" className={classes.container}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Box>
<Typography variant="h1" style={{ border: "1px solid black" }}>
Hello
</Typography>
</Box>
</Grid>
</Grid>
</Container>
</main>
</div>
);
}
,
试试这个!
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,[theme.breakpoints.down('sm')]: {
marginBottom: 56,},[theme.breakpoints.up('sm')]: {
marginBottom: 64,menuButton: {
marginRight: theme.spacing(1),title: {
flexGrow: 1,}))
您可以像这样将上述内容添加到您的代码中
const Navbar = () => {
const classes = useStyles()
return (
<div className={classes.root}>
<AppBar position='fixed' color='primary'>
<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>
</div>
)}
有关更多文档,请访问 material-ui breakpoint customization
本文链接:https://www.f2er.com/3156044.html