在某些断点处隐藏 Material UI 网格列

Question

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

<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}，但这不是正确的代码。有谁知道正确的做法吗？

Answer 1

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

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

Working demo in codesandbox

代码片段

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

Answer 2

你可以使用MaterialUI的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;

在某些断点处隐藏 Material UI 网格列

Hide Material UI grid column on certain breakpoints

grid

reactjs

material-ui