在某些断点上隐藏 Material UI 网格列答案

【问题标题】：Hide Material UI grid column on certain breakpoints在某些断点上隐藏 Material UI 网格列
【发布时间】：2020-07-07 12:50:50
【问题描述】：

我试图在某些断点上隐藏一些列，如下所示：

<Grid container>
  <Grid item sm={1} md={0} />
  <Grid item sm={10} md={12}>
    {/* some content goes here */}
  </Grid>
  <Grid item sm={1} md={0} />
</Grid>

因此，在此示例中，第一列和最后一列不应显示在中等断点和更大的断点上。我写了md={0}，但这不是正确的代码。有谁知道这样做的正确方法吗？

【问题讨论】：

标签： reactjs grid material-ui

【解决方案1】：

您可以使用Material Ui System's display (hiding elements) 功能。

display 不适用于Grid，因此您可以使用Box 并使用component 属性并提供Grid

Working demo in codesandbox

代码 sn-p

      <Grid container spacing={3}>
        <Box
          component={Grid}
          className={classes.one}
          item
          xs={1}
          display={{ md: "none" }}
        >
          One
        </Box>
        <Grid className={classes.two} item sm={10} md={12}>
          Two
        </Grid>
        <Box
          component={Grid}
          className={classes.three}
          item
          xs={1}
          display={{ md: "none" }}
        >
          Three
        </Box>
      </Grid>

【讨论】：

【解决方案2】：

你可以使用 Material UI 的 useMediaQuery

import { DataGrid } from "@mui/x-data-grid";
import useMediaQuery from "@mui/material/useMediaQuery";

const data = [
  {
    id: 1,
    column1: "abc",
    column2: "xyz",
  },
  {
    id: 2,
    column1: "abc2",
    column2: "xyz2",
  },
  {
    id: 3,
    column1: "abc3",
    column2: "xyz3",
  },
];
const Hide = () => {
  const matches = useMediaQuery("(max-width:600px)");
  const columns = [
    {
      field: "column1",
      headerName: "Column1",
    },
    {
      field: "column2",
      headerName: "Column2",
      hide: matches,
    },
  ];

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid rows={data} columns={columns} />
    </div>
  );
};

export default Hide;

【讨论】：