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

Posted

技术标签:

【中文标题】是否可以使用 CSS Grid 代替 Material UI 的网格组件? [关闭]【英文标题】:Is it possible to use CSS Grid in place of Material UI's grid component? [closed] 【发布时间】: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 网格重做相同的代码,正如你所说的那样是垃圾。为了实现简单的东西,我必须寻找解决方法。 【参考方案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)。

【讨论】:

以上是关于是否可以使用 CSS Grid 代替 Material UI 的网格组件? [关闭]的主要内容,如果未能解决你的问题,请参考以下文章

简单横幅广告-是否有更好的桌面和移动版面布局方式? (Flexbox / CSS Grid)

Chrome 开发者工具中是不是有 CSS Grid 高亮显示?

我可以使用 css-grid 来显示这个布局吗?

css grid 格子布局

图像上的居中文本叠加是对象适合和对象位置(CSS GRID)

像 CSS 中的弹性项目一样收缩网格项目