React Material UI Grid

Question

Is there any correct and easy way to create kind of table with Material UI ?. direction="column" or direction="row" are not working if I want to have different height columns. Any suggestions?

Answer 1

如果你想使用 Material-ui 内置的网格系统，你可以使用 2 个网格容器来实现，一个带有direction="row"（默认），第二个（子）带有direction="column". 它需要一些个性化的样式，可能看起来很“hacky”，但我不知道其他方式：

import React from "react";
import ReactDOM from "react-dom";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  box: {
    height: "100%",
    width: "100%"
  },
  container: {
    height: "400px"
  },
  innerContainer: {
    height: "100%"
  },
  item: {
    flex: 1
  }
});

function App() {
  const classes = useStyles();
  return (
    <Grid spacing={4} className={classes.container} container>
      <Grid xs={4} item>
        <Grid
          spacing={4}
          direction="column"
          className={classes.container}
          container
        >
          <Grid className={classes.item} item>
            <Box className={classes.box} bgcolor="blue" />
          </Grid>
          <Grid className={classes.item} item>
            <Box className={classes.box} bgcolor="red" />
          </Grid>
        </Grid>
      </Grid>
      <Grid xs={8} item>
        <Box className={classes.box} bgcolor="green" />
      </Grid>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

现场示例

另一个选择是使用 CSS 网格。它需要的元素少得多，而且（至少对我而言）更简单。但是，如果您关心此类事情，它在 Internet Explorer 中不起作用。

import React from "react";
import ReactDOM from "react-dom";
import Box from "@material-ui/core/Box";
import { makeStyles } from "@material-ui/styles";


const useStyles = makeStyles({
  container: {
    height: '400px',
    width: "100%",
    display: 'grid',
    gridTemplateColumns: '1fr 2fr',
    gridTemplateRows: '1fr 1fr',
    gridGap: "20px",

  },
  firstChild: {
    gridRow: '1 / 2',
    gridColumn: '1 / 2',
  },
  secondChild: {
    gridRow: '1 / 3',
    gridColumn: '2 / 3',
  },
  thirdChild: {
    gridRow: '2 / 3',
    gridColumn: '1 / 2',
  },
});

function App() {
  const classes = useStyles();
  return (
    <Box className={classes.container}>
      <Box className={classes.firstChild} bgcolor="blue" />
      <Box className={classes.secondChild} bgcolor="red" />
      <Box className={classes.secondThird} bgcolor="green" />
    </Box>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

现场示例