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>

您可以看到生成的 styles 只是MuiGrid-item ，沒有大小參考。 我究竟做錯了什么？

Answer 1

我將您的代碼復制到CODE-SANDBOX 中，一切正常。

這是屏幕截圖：

正如您所看到的，一切都運行良好。

我在你的問題中提到的唯一一件事是，在你提供的屏幕截圖中，你應用了background: red; 樣式添加到容器中，但是您插入的代碼中沒有這樣的樣式屬性。

也許你沒有連接到開發服務器，你正在查看一個緩存的版本，這可能是由你的PWA中的服務工作者引起的。

建議您不要在開發環境中啟用離線優先服務工作者，因為當使用以前緩存的資產並且不包括您在本地所做的最新更改時，這可能會導致挫敗感。

如果您能在問題中提供更多詳細信息，那就太好了。

Answer 2

,! 你沒有做錯任何事，你可以在這里看你的代碼，它可以工作https://codesandbox.io/s/zealous-montalcini-x02kg和 class " MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 "像你要的那樣。

你的代碼是正確的

你試過把它關掉然后再打開嗎？ 哈哈

也許你在錯誤的頁面、舊版本的代碼或類似的東西中看到你的代碼，也嘗試在私人瀏覽器中打開你的頁面並檢查它是否工作。

還要檢查你是否使用 material-ui 的最新版本。我的意思是版本接受 CSS 網格布局（但我認為它在所有版本中都有效，只是檢查一下可能嗎？）。

希望能幫到你，祝你好運。