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

【问题标题】：React Material-UI Grid System [duplicate]React Material-UI 网格系统 [重复]
【发布时间】：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（另一个材料设计反应框架），对这些框架有什么意见吗？

标签： reactjs material-design material-ui grid-system

【解决方案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】：

现在 Material-UI 有自己的 Flexbox 布局。它在 alpha 分支中您可以通过 Material-UI latest build 使用它

npm install material-ui@next

有关更详细的文档和示例，您可以访问此链接https://material-ui-1dab0.firebaseapp.com/layout/responsive-uie-ui

【讨论】：