是否可以使用 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 高亮显示?