javascript - Material UI Grid 项目无法正常工作

Question

我有：

      <div style={{ flexGrow: 1 }}>
        <Grid container spacing={0} style={{ width: '100%' }}>
          <Grid item xs={12} sm={6}>
            Left Side
          </Grid>
          <Grid item xs={12} sm={6}>
            right Side
          </Grid>
        </Grid>
      </div>

您可以看到生成的样式只是MuiGrid-item没有参考大小。我究竟做错了什么？

标签： javascriptcssreactjsmaterial-ui

Answer 1

我将您的代码复制到CODE-SANDBOX 中，一切都很好。

这是屏幕截图：

如您所见，一切都像魅力一样运作。

我在您的问题中提到的唯一一件事是，在您提供的屏幕截图中，您已将background: red;样式应用于容器，但您插入的代码中没有这样的样式属性。

也许您没有连接到开发服务器，并且您正在查看缓存版本，这可能是由PWA中的服务人员引起的。

建议您不要在开发环境中启用离线优先服务工作者，因为当使用以前缓存的资产并且不包括您在本地所做的最新更改时，这可能会导致挫败感。

如果您可以在问题中提供更多详细信息，那就太好了。