css - AppBar 与其他元素重叠
问题描述
我开始使用 React/Material-UI,以及 CSS 等的新手...我有一个带有 APPBar 的简单页面布局。不幸的是,这个 AppBar 与本应位于其下方的元素重叠。
我找到了这个答案: AppBar Material UI questions
但这感觉完全错误。如果我的 AppBar 具有可变高度,取决于图标、显示模式等怎么办?
我尝试创建一个垂直网格,将元素包装在不同的项目中,使顶部容器成为 flex 容器并使用 flex 设置,似乎没有任何效果,应用栏始终位于文本顶部。
代码非常简单:
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 应用栏默认为position="fixed"
. 这将它与标准 DOM 的布局分开,以允许内容在其下方滚动,但结果是在页面上没有为它留出空间。
您可以通过将其下方的所有内容包装在 div 中并指定足够的边距来解决此问题,或者通过更改的position
属性<AppBar>
使其不再是"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: 80}}>
<Box>
<Typography variant='h1' style={{ border: '1px solid black' }}>
Hello
</Typography>
</Box>
</div>
</div>
)
}
export default App;
推荐阅读
- c# - Unity 2D 中的视频播放器播放音频但在处于非活动状态后设置为活动时不显示视觉效果
- powershell - 将新别名附加到别名的别名
- java - Kubernetes 上微服务之间集群间通信的最佳方式?
- javascript - 承诺所有猫鼬找到返回不完整的值
- java - 如何在Java中拆分括号和
- css - :nth-child(1) 不工作 - 使用 html 示例
- react-native - React Native - 模式中未指定“useNativeDriver”
- c++ - C ++ RasPi - 无限循环中的分段错误
- android - 如何将 React Native 应用程序中的通知图标用于某些 RNBridge?
- python - 读取 json 键值作为不敏感键