如何摆脱 React 中的右边距？答案

【问题标题】：How do I get rid of right margin in React?如何摆脱 React 中的右边距？
【发布时间】：2021-05-25 21:48:28
【问题描述】：

在反应中，我试图在 topElement 下方显示三个元素。我希望 3 个元素均匀地填充 topElement 下方的空间，即去掉下图中红色圈出的右手间隙（保持顶部的间隙）。为了达到这一点，我有：

<Box padding={4}>
  <Grid container spacing={4}>
      <Grid item xs={12}>
          <topElement />
      </Grid>
  </Grid>

  <Grid container spacing={PADDING} direction="row" xs={12} 
      justify="space-between"  alignItems="center" >
      <Grid item xs={4}>
        <el1...
        />
      </Grid>
      <Grid item xs={4}>
        <El2...
        />
      </Grid>
      <Grid item xs={4}>
        <El3...
        />
      </Grid>
...

那么最后一块是什么？蒂亚！

【问题讨论】：

这些组件似乎都是自定义的，我建议包括相关的样式/组件
谢谢，它们是定制的，但相当复杂。似乎没有什么明显影响它们的利润，但我是新手，所以可能是错误的。
如果它是一个框架，您也可以发布该信息
我很确定是材质 ui
在 package.lock 中确实有 material-ui 的引用。

标签： css reactjs typescript material-ui

【解决方案1】：

您的第二个 Grid Container 有一个额外的 prop xs={12} 集，它添加了一个影响您的网格布局的 max-width: 100%。

从您的网格容器中删除该属性，它将按预期工作。

【讨论】：

我确定我试过了，哈哈哈！非常感谢！！