是否可以使用 CSS Grid 代替 Material UI 的网格组件？ [关闭]答案

【问题标题】：Is it possible to use CSS Grid in place of Material UI's grid component? [closed]是否可以使用 CSS Grid 代替 Material UI 的网格组件？ [关闭]
【发布时间】：2020-12-03 10:34:43
【问题描述】：

Material-UI Grid Component 基于 flexbox 并且运行良好。但是，我试图了解使用它与 CSS Grid 相比是否有任何好处，CSS Grid 也很容易使用。我实际上更喜欢 CSS Grid，但我不想通过使用它来破坏系统的其余部分。它是否会以任何方式干扰 Material UI 的其余部分？

有什么见解吗？提前致谢。

【问题讨论】：

我没用过Material-UI grid，很久没用了。 MUI 网格看起来像垃圾，如果你不想遇到奇怪的错误，你必须用它做各种变通方法。我发现只使用 CSS Grid 和/或 Flexbox 比尝试处理 MUI 网格怪癖更容易。
@Chris 我不知道为什么这个 Q 被关闭了，smh。无论如何，正如 Q 所问的那样，将 css grid 与 material-ui 一起使用会导致任何问题吗？因为我也试图做同样的事情，但布局只是打破了。然而，相同的布局代码在我的旧项目中效果很好。我有一个自定义导航和页脚，有很多自定义功能（特别是导航栏），并希望保留它。但是由于它正在中断，我教 mui 和 css 网格不能携手合作。所以，我试图用 mui 网格重做相同的代码，正如你所说的那样是垃圾。为了实现简单的东西，我必须寻找解决方法。

标签： css reactjs material-ui next.js css-grid

【解决方案1】：

Grid 组件提供的主要好处（与直接使用 flexbox 相比）是基于主题的断点道具（xs、sm、md 等）的便利性，可以轻松调整不同屏幕宽度的网格列数。如果您更喜欢 CSS Grid（并且您不尝试支持 IE 11）或直接使用 flexbox，那么没有理由不使用它。 Material-UI 中的任何内容都不关心您是否使用了 Grid 组件。

在我自己的应用程序中，在很多情况下，Material-UI 的 Grid 组件很容易提供所需的布局，我们继续使用它，而在其他情况下，Grid 会妨碍我们直接使用 flexbox CSS（目前，我们的应用程序仍然支持 IE 11，所以我们从未使用 CSS Grid，尽管我期待将来我们更改支持的浏览器以便我们可以使用 CSS Grid）。

【讨论】：