javascript - 如何摆脱 Material UI 容器组件中的填充?
问题描述
我正在尝试使用 material-ui 框架创建一个英雄横幅。
到目前为止,我看起来如下:
如您所见,左右填充令人讨厌。我似乎无法摆脱它。
我的 Hero 组件如下所示:
import React from 'react'
import Container from '@material-ui/core/Container'
import { makeStyles } from '@material-ui/core'
const useStyles = makeStyles((theme) => ({
heroContent: {
backgroundColor: theme.palette.background.paper,
padding: theme.spacing(8, 0, 6),
},
heroButtons: {
marginTop: theme.spacing(4),
},
}))
const Hero = () => {
const classes = useStyles()
return <Container className={classes.heroContent}></Container>
}
export default Hero
有人可以解释一下我如何摆脱左右两边的填充,实现全宽吗?
如您所见,我尝试在我的样式中设置填充,但这没有效果。任何指导表示赞赏!
解决方案
disableGutters
道具移除填充物。
例子:
import React from "react";
import CssBaseline from "@material-ui/core/CssBaseline";
import Typography from "@material-ui/core/Typography";
import Container from "@material-ui/core/Container";
export default function SimpleContainer() {
return (
<React.Fragment>
<CssBaseline />
<Container disableGutters maxWidth={false}>
<Typography
component="div"
style={{ backgroundColor: "#cfe8fc", height: "100vh" }}
/>
</Container>
</React.Fragment>
);
}
推荐阅读
- php - WC_Order->get_items() 返回空项目
- c# - 在 SSMS 中查询返回结果,但在 C# 中没有
- google-sheets - 存在匹配项时将单元格值合并到一个单元格中
- javascript - 将 IndexedDB 实例作为 Electron 中的不同网站访问
- visual-studio-code - 在 Visual Studio Code 的工作区中展开文件?
- here-api - 当路由 API 没有问题时,HERE Fleet Telemetics API 找不到路由?
- c# - 7 Zip 提取错误:标头错误 密码错误
- wpf - ProgressChanged 不更新进度条
- c# - 如何获得图像的中心 x 和 y
- python - 将变量设置为列表,其中列表作为参考