Question

是否存在使用Material UI创建表类型的正确且简单的方法？如果我想使用不同的高度列，则direction =“ column”或direction =“ row”不起作用。有什么建议么？

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

LIVE EXAMPlE

其他选项是使用CSS Grid。它需要的元素要少得多，并且（至少对我而言）更简单。但是，如果您关心这种事情，它将无法在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);

LIVE EXAMPLE

React Material UI网格

1 个答案: