Material UI和网格系统

Question

我正在尝试使用Material-UI，是否有创建网格布局的选项（如Bootstrap）？

如果没有，有什么方法可以添加此功能？

有一个GridList组件，但我猜它有不同的用途。

- kharandziuk

---

不认为它有任何组件可以创建响应式网格。 - Lucky Chingi

答案在这里 https://github.com/callemall/material-ui/issues/190 - kharandziuk

Answer 1

Material UI通过Grid组件实现了他们自己的Flexbox布局。

看起来他们最初想保持自己作为一个纯粹的“组件”库。但其中一位核心开发者决定太重要了，必须拥有自己的布局系统。现在它已经被合并到核心代码中，并且随着v1.0.0版本的发布。

您可以通过以下方式安装：

npm install @material-ui/core

现在它已经出现在官方文档中，并带有示例代码。

- icc97

---

我看到你发布了我刚要添加的答案！哈哈，我刚回复了你对当前领先答案的评论。 - Cleanshooter

网格系统运作良好，但是还有一些未被实现的组件，比如“选择字段”。我不知道如何使用这样的字段，能否帮助我解决这个问题？ - Suresh Mainali

我同意@SureshMainali的观点，因为我也遇到了同样的问题。大多数组件都缺少属性，甚至在自定义主题实现方面也是如此。 - Sai Ram

@SaiRam 我不会说是大多数，但确实缺少了Select，我现在只是用单选按钮替换它，但我相信不久之后Select会从主干移植过来。 - icc97

我迫不及待地想看到CSS Grid的应用，所有这些UI框架都将被重写，显然CSS Grid已经成为了趋势。我几乎可以确定这些框架将再次被重写，以便从CSS Grid所提供的灵活性中受益。 - Ernani Joppert

Answer 2

从材料设计规范描述中得知:

网格列表是标准列表视图的替代品。网格列表与用于布局和其他视觉呈现的网格不同。

如果您正在寻找一个更轻量级的网格组件库，我正在使用React-Flexbox-Grid，这是在 React 中实现 flexboxgrid.css 的方法。

此外，React-Flexbox-Grid 与material-ui和react-toolbox(另一种材料设计实现)完美兼容。

- Roy Lee

---

截至本篇文章发布时，React-Flexbox-Grid 的实现较差，需要过多的外部依赖才能正常运行。此外，@Roylee 是它的开发者...因此他的观点可能有些偏见 ;) ... - Cleanshooter

另外，react-flexbox-grid 依赖于 flexboxgrid，而 flexboxgrid 并没有使用 Material Design 推荐的响应式断点。请参阅：https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints - Ken Gregory

@Cleanshooter 这是你的竞争版本吗？也许你有点偏见 :) - icc97

@icc97 是的和不是。我并不是真的想要“竞争”，只是为了我正在构建的应用程序而制作了一个临时方案。在对两者感到失望之后，我做出了这个决定...但现在已经无关紧要了，因为CallEmAll的人在最新版本的Material-UI中包含了一个网格系统。不过我个人还没有尝试过。https://github.com/callemall/material-ui/pull/5808 - Cleanshooter

@Cleanshooter 你的看起来非常棒。我一直在测试新的 Material-UI 网格，到目前为止它工作得很好。 - icc97

Answer 3

我寻找了解决方法，最好的方式是使用Flex和内联样式来处理不同组件。例如，要将两个Paper组件分成垂直比例为1：4的两个部分并占据整个屏幕的情况，下面的代码可以很好地实现。

const styles = {
  div:{
    display: 'flex',
    flexDirection: 'row wrap',
    padding: 20,
    width: '100%'
  },
  paperLeft:{
    flex: 1,
    height: '100%',
    margin: 10,
    textAlign: 'center',
    padding: 10
  },
  paperRight:{
    height: 600,
    flex: 4,
    margin: 10,
    textAlign: 'center',
  }
};

class ExampleComponent extends React.Component {
  render() {
    return (
      <div>
        <div style={styles.div}>
          <Paper zDepth={3} style={styles.paperLeft}>
            <h4>First Vertical component</h4>
          </Paper>
          <Paper zDepth={3} style={styles.paperRight}>
              <h4>Second Vertical component</h4>
          </Paper>
        </div>
      </div>
    )
  }
}

现在，通过一些更多的计算，您可以轻松地在页面上分割组件。

关于flex的进一步阅读

- shobhit1

---

我同意，使用flex css属性提供了我所需的简单格式。 - James Gentes

Answer 4

我希望不太晚回复。

我也在寻找一个简单、健壮、灵活且高度可定制的响应式网格系统，以供在我的项目中使用。

我所知道最好的是react-pure-gridhttps://www.npmjs.com/package/react-pure-grid

react-pure-grid让您有能力定制网格系统的每个方面，同时它内置了默认值，适用于任何项目。

使用方法

npm install react-pure-grid --save

import {Container, Row, Col} from 'react-pure-grid';

const App = () => (
      <Container>
        <Row>
          <Col xs={6} md={4} lg={3}>Hello, world!</Col>
        </Row>
        <Row>
            <Col xsOffset={5} xs={7}>Welcome!</Col>
        </Row>
      </Container>
);

- Musyoka Morris

Answer 5

我通常的做法是前往http://getbootstrap.com/customize/，仅勾选“网格系统”进行下载。下载后会有两个文件：bootstrap-theme.css 和 bootstrap.css，我只需要后者。

这样，我就可以使用 Bootstrap 的网格系统，同时其他样式都来自 Material UI。

- 6324

Answer 6

以下内容纯粹使用MUI Grid系统制作：

通过以下代码：

// MuiGrid.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary,
    backgroundColor: "#b5b5b5",
    margin: "10px"
  }
}));

export default function FullWidthGrid() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={0}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

↓ CodeSandbox ↓

- Hasan Sefa Ozalp

---

不错的示例演示！ - user11744573

该演示是一个基本示例。通常，大型项目具有嵌套的网格和spacing不按预期工作。 - L. Pier Roberto

Answer 7

这是一个使用Material-UI的网格系统示例，类似于Bootstrap：

<Grid container>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
    <Grid item xs={12} sm={4} md={4} lg={4}>
    </Grid>
 </Grid>

- Timmy