如何摆脱 Material UI 容器组件中的填充？答案

【问题标题】：How to Get Rid of Padding in Material UI Container Component?如何摆脱 Material UI 容器组件中的填充？
【发布时间】：2020-10-28 16:26:17
【问题描述】：

我正在尝试使用 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

谁能解释一下我如何摆脱左右两边的填充，实现全宽？

如您所见，我尝试在我的样式中设置填充，但这没有任何效果。任何指导表示赞赏！

【问题讨论】：

即使在移除填充之后，您也不会得到完整的 wdth 容器。由于这里也应用了最大宽度，因此您也需要删除此属性
谢谢。我刚刚将 maxWidth={false} 添加到我的容器中，但它没有帮助。我错过了什么吗？还有什么方法可以惯用地摆脱 24px 填充？
我希望你可以访问你的 css，我不确定这个 maxWidth={false} 会在这里做什么，进入你的 css 并写下这个，.MuiContainer-root {max-width: 100%！重要；填充：0 !important;}
@finite_diffidence 虽然disableGutters 道具（如我的回答）更容易解决这个问题，但heroContent CSS 类中的方法在这里对我来说很好：codesandbox.io/s/container-disablegutters-forked-y9st6?file=/…。跨度>

标签： javascript css reactjs material-ui

【解决方案1】：

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>
  );
}

【讨论】：

谢谢！这完美地解决了这个问题！