Material UI 和网格系统

Question

我在玩Material-UI. Are there any options for creating a grid layout (like in Bootstrap）？

如果没有，请问如何添加这个功能？

有一个 GridList component 但我猜它有一些不同的用途。

Answer 1

Grid Lists are an alternative to standard list views. Grid lists are distinct from grids used for layouts and other visual presentations.

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

最重要的是，React-Flexbox-Grid 与 material-ui 和 react-toolbox 配合得很好（替代 material 设计实现）。

Answer 2

我四处寻找答案，发现最好的方法是在不同的组件上使用 Flex 和内联样式。

例如，要使两个纸张组件将我的整个屏幕分成 2 个垂直组件（按 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>
    )
  }
}

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

Further Reading on flex

Answer 3

希望现在回复还不算太晚。

我也在寻找一个简单、健壮、灵活和高度可定制的 bootstrap 类似反应网格系统用于我的项目。

我知道的最好的是 react-pure-grid https://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>
);

Answer 4

我的做法是去http://getbootstrap.com/customize/只勾选"grid system"下载。下载的文件里面有bootstrap-theme.css和bootstrap.css，我只需要后者。

这样，我可以使用 Bootstrap 的网格系统，以及 Material UI.

的所有其他内容

Answer 5

Material UI 已经通过 Grid component 实现了自己的 Flexbox 布局。

看来他们 initially wanted to keep themselves as purely a 'components' library. But one of the core developers decided it was too important not to have their own. It has now been merged into the core code and was released with v1.0.0.

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

npm install @material-ui/core

现在在官方documentation with code examples。

Answer 6

这里是 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>

Answer 7

以下纯属MUI Grid system,

制作

使用下面的代码，

// 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 ↓

Material UI 和网格系统

Material UI and Grid system

grid-system

reactjs

material-design

material-ui