材质UI和网格系统

神无乐2020-03-12

我正在与Material-UI一起玩。是否有创建网格布局的任何选项（例如在Bootstrap中）？

如果不是，添加此功能的方式是什么？

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

卡卡西理查德2020/03/12 10:56:52

这是一个古老的问题，但谷歌把我带到这里。稍作搜索后，我发现了一个很好的软件包：https : //www.npmjs.com/package/react-grid-system

我认为这是最好的，易于使用且轻巧的产品。

Sam猿泡芙2020/03/12 10:56:52

这是带有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>

米亚伽罗村村2020/03/12 10:56:52

我很难找到一个可以实现Material Design响应行为标准的UI框架，因此我创建了两个用于实现Material Design网格系统的软件包：

一个CSS框架：material-sensitive-grid
一组实现该框架的React组件：react-material-response-grid。

这些软件包遵循Google概述的响应式UI标准。支持标准中指定的所有视口大小，并考虑适当的装订线，建议的列数，甚至超过1600 dp的布局行为。它的行为应符合“ 设备指标”指南中建议的每个设备。

卡卡西神奇2020/03/12 10:56:52

下面是纯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>
  );
}