React Material-UI 网格系统 [重复]

Posted 2023-02-22

技术标签:

【中文标题】React Material-UI 网格系统 [重复]【英文标题】：React Material-UI Grid System [duplicate] 【发布时间】：2016-09-16 12:09:58 【问题描述】：

我正在寻找一种方法来实现响应式网格系统，以使用 react 和 material-ui 开发材料设计应用程序。虽然React-Bootstrap 有this，但我还没有找到与Material-UI 类似的东西。 GridList 很好，但不太一样。有什么解决办法吗？

【问题讨论】：

我相信它仍在他们的路线图上github.com/callemall/material-ui/issues/3614。我正在寻找替代品和其他我正在使用 uikit 网格系统制作的东西。不使用引导解决方案的原因是什么？如果您使用的是 webpack 或支持 tree-shaking 的构建工具，则不要在包中包含不相关的内容。只是网格。 @AvraamMavridis 这不是一个丑陋的解决方案吗？谁能向我保证这两个框架是相互兼容的？ @GershonPapi 据我所知，material-ui 正在使用内联样式，所以您可能不会遇到任何问题。但是，是的，我同意这是一个丑陋的解决方案，但在我看来，如果您不想构建自己的网格系统，这似乎是唯一的解决方案。 @AvraamMavridis k，谢谢。我也考虑切换到具有网格系统的 react-toolbox 或 react-mdl（另一个材料设计反应框架），对这些框架有什么意见吗？ 【参考方案1】：

我正在使用带有 Material-UI 的引导程序，而不是对 material-ui 使用内联样式。它工作得很好而且很简单。这是一个例子。

<div className="Container">
<button className="btn btn-primary"> Action</button>
<div className="row">

     <div className="col-sm-4">
           <ReactAutoForm collection=DoctorCategories type="insert" debug=true />
      </div>

      <div className="col-sm-8">
            <table><TableHeader><TableRow>
                                        <TableHeaderColumn>Name</TableHeaderColumn>
                                        <TableHeaderColumn>Description</TableHeaderColumn>
                                        <TableHeaderColumn>Edit</TableHeaderColumn>
                                    </TableRow>
      </TableHeader>
      <TableBody>
</TableBody>
 </TableBody>
                            </table>
                            </div>

</div>
</div>

【讨论】：

【参考方案2】：

react-inline-grid (http://broucz.github.io/react-inline-grid/) 似乎可以很好地解决这个问题。

这个库背后的概念与 Bootstrap 网格系统背后的概念非常接近，并且它使用内联样式。

【讨论】：

【参考方案3】：

我创建了两个实现 Material Design 网格系统的包。第一个 material-responsive-grid 是一个 CSS 框架，第二个 react-material-responsive-grid 是一组实现此框架的 React 组件。

这些包遵循 Google 概述的responsive UI 标准，因此您不必决定已由其他所有 UI 框架实现的不同断点。支持在其标准中指定的所有视口大小，同时考虑到适当的装订线、推荐的列数，甚至超过 1600 dp 的布局行为。它应该按照Device Metrics 指南中对每个设备的建议运行。

每个包都在 github 上可用，并包含一个示例 React 应用程序。

如果您有任何问题，请告诉我。

【讨论】：

【参考方案4】：