Question

我试图使用<div>来包装<Grid>内的元素，但是我注意到这会破坏我的<Grid>！我在自举网格系统中尝试了相同的操作但是没有发生此问题，

问题是我必须使用div为Grid内的元素赋予某种样式，但是正如您在Codesandbox中看到的那样，Grid在使用{ div，我该如何处理？我应该使用div的替代品还是Grid的某种道具可以解决此问题？

Answer 1

问题出在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％宽度，没有边距，您自己也可以这样做。

Answer 2

我不知道结果如何，但是您可以将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" }}>

Answer 3

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

从您的示例看来，您可以仅在grid元素内的纸张上添加边框以获得所需的样式。

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

如果要在一个元素上使用多个类，请使用字符串插值：

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