答案 0 :(得分: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 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);