我开始使用 React/Material-UI,并且对 CSS 等也很陌生......
我有一个带有 APPBar 的简单页面布局。不幸的是,这个 AppBar 与本应位于其下方的元素重叠。
我找到了这个答案:AppBar Material UI 问题 https://stackoverflow.com/questions/50992733/appbar-material-ui-questions
但这感觉完全错误。如果我的 AppBar 具有可变高度(具体取决于图标、显示模式等)怎么办?
我尝试创建一个垂直网格,将元素包装在不同的项目中,使顶部容器成为弹性容器并使用弹性设置,似乎没有任何效果,应用程序栏始终位于文本顶部。
代码很简单:
import React from 'react';
import { AppBar, Typography, Box } from '@material-ui/core';
function App() {
return (
<div>
<AppBar>
<Typography variant='h3'>
AppBar
</Typography>
</AppBar>
<Box>
<Typography variant='h1' style={{ border: '1px solid black' }}>
Hello
</Typography>
</Box>
</div>
)
}
export default App;
“Hello”文本块只有一半可见:
发生这种情况是因为 MaterialUI App Bar 默认为position="fixed"
。这将其与标准 DOM 布局分开,以允许内容在其下方滚动,但结果是页面上没有为其留出空间。
您可以通过将其下方的所有内容包装在 div 中并指定足够的边距来解决此问题,或者通过更改position
的财产<AppBar>
所以它不再是"fixed"
。在您的示例中,您也可以将样式应用于<Box>
如果这是下面的唯一内容<AppBar>
.
e.g.
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: 80}}>
<Box>
<Typography variant='h1' style={{ border: '1px solid black' }}>
Hello
</Typography>
</Box>
</div>
</div>
)
}
export default App;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)