使用 <div> 标签会破坏材质 UI Grid答案

【问题标题】：Using <div> tag breaks the material UI Grid使用 <div> 标签会破坏材质 UI Grid
【发布时间】：2019-07-17 17:05:37
【问题描述】：

我试图使用<div> 来包装我在<Grid> 内的元素，但我注意到这会破坏我的<Grid>！，我在引导网格系统中尝试了同样的事情，但这个问题没有发生,

问题是我必须使用 div 为 Grid 内的元素赋予一些样式，但正如您在 Codesandbox 中看到的那样，Grid 在使用 div 后会中断，怎么能我处理这个？，我应该使用div 的替代品还是Grid 的某种道具可以解决这个问题？

【问题讨论】：

【解决方案1】：

我不知道您期望的结果是什么，但您可以将width:100% 添加到您的 div 中。另一种选择是添加与Grid 相同的类，即MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12

结果：选项1<div style={{ border: "4px double black", width: '100%' }}>

选项 2 <div className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12" style={{ border: "4px double black" }}>

【讨论】：

【解决方案2】：

只需将您的边框样式添加到classes.paper

从您的示例看来，您只需将边框添加到网格元素内的纸张即可获得所需的样式。

paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary,
    border: "4px double black"
  }

如果你想在一个元素上有多个类，使用字符串插值：

<Paper className={`${classes.paper1} ${classes.paper2}`}>

【讨论】：

【解决方案3】：

问题出在 flexbox 上，因为你的 div 没有它需要的属性，所以它坏了。

.MuiGrid-grid-xs-12 {
    flex-grow: 0;
    max-width: 100%;
    flex-basis: 100%;
}

将此添加到div 将具有与直接为 Grid 提供样式属性相同的结果。

但由于.MuiGrid-spacing-xs-3 类，左、右和上边框将在视图之外。

.MuiGrid-spacing-xs-3 {
    width: calc(100% + 24px);
    margin: -12px;
}

根据您的需要，使用不同的间距，例如 0，以获得正常的 100% 宽度，没有边距，并且您可以自己使用。

【讨论】：