使用 Material-UI Grid 定位组件

Question

我有一个代码框 (https://codesandbox.io/s/determined-pascal-ypmwk?file=/src/App.js)，它显示了我当前的应用程序是如何使用 Material-UI 网格设置的。我有 5 个正在定位的组件，这就是我希望它们在 lg 及以上设置上的外观。

然后在md 及以下设置看起来像这样

我尝试了几种不同的方法，我认为最接近我的方法是目前在我的代码盒中。我不太清楚如何将组件5 放在同一行以用于较大的屏幕，而将组件放在下一行用于较小的屏幕。

提前感谢您的帮助！

Answer 1

您可以按照文档使用 Material UI 断点挂钩 material-ui-breakpoints

我为您创建了一个演示应用程序。看看它是否适合您的用例 link-to-demo

这里有一些相同的示例代码

import React from "react";
import withWidth, { isWidthDown, isWidthUp } from "@material-ui/core/withWidth";
import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  item1: {
    height: "200px",
    border: "1px solid black"
  },
  item2: {
    height: "400px",
    border: "1px solid black"
  },
  item3: {
    height: "200px",
    border: "1px solid black"
  },
  item4: {
    height: "200px",
    border: "1px solid black"
  },
  item5: {
    height: "200px",
    border: "1px solid black"
  }
}));

const App = (props) => {
  const classes = useStyles();

  if (isWidthUp("lg", props.width)) {
    return layout1(classes);
  } else if (isWidthDown("md", props.width)) {
    return layout2(classes);
  }

  return <React.Fragment />;
};

const layout1 = (classes) => {
  return (
    <Grid container>
      <Grid item lg={12} className={classes.item1}>
        1
      </Grid>
      <Grid item lg={4} className={classes.item2}>
        2
      </Grid>
      <Grid item lg={8}>
        <Grid container>
          <Grid item lg={6} className={classes.item3}>
            3
          </Grid>
          <Grid item lg={6} className={classes.item4}>
            4
          </Grid>
          <Grid item lg={12} className={classes.item5}>
            5
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
};

const layout2 = (classes) => {
  return (
    <Grid container>
      <Grid item xs={12} className={classes.item1}>
        1
      </Grid>
      <Grid item xs={9} className={classes.item2}>
        2
      </Grid>
      <Grid item xs={3}>
        <Grid container>
          <Grid item xs={12} className={classes.item3}>
            3
          </Grid>
          <Grid item xs={12} className={classes.item4}>
            4
          </Grid>
        </Grid>
      </Grid>
      <Grid item xs={12} className={classes.item5}>
        5
      </Grid>
    </Grid>
  );
};

export default withWidth()(App);