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，没有大小引用。我做错了什么？

Answer 1

我把你的代码复制到一个CODE-SANDBOX那里一切都很好。

截图如下:

如您所见，一切正常。

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

也许你没有连接到开发服务器，你正在查看一个缓存版本，这可能是由你的 PWA 中的服务 worker 引起的。 .

It's recommended that you do not enable an offline-first service worker in a development environment, as it can lead to frustration when previously cached assets are used and do not include the latest changes you've made locally.

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