在使用MaterialUI网格设置样式后指定:

Question

我阅读了Flex框：将最后一行与网格对齐，并试图看看这是否也适用于我：

.grid::after {
content: "";
flex: auto;
}

但不知道如何在我在MaterialUI:中使用的JS样式中指定这一点

const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
height: 140,
width: 140,
},
control: {
padding: theme.spacing(2),
},
fullName: {
marginRight: '3px'
}
}));

比如我该如何在后面添加到MaterialUI网格？

<Grid className={classes.root} container justify="space-around" spacing={2}>
<CompanyList companies={companies} data-test-id="companyList" />
</Grid>

Answer 1

您可以使用以下内容：

const useStyles = makeStyles((theme) => ({
grid: {
// --- some styles
'&::after': {
// --- some style
}
},
}));

Answer 2

将伪元素添加到材料ui组件的任务类似

需要对内容属性进行双引号

的工作测试

const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
"&::after": {
content: '""',
width: 40,
height: 40,
backgroundColor: "cyan",
color: "white"
}
},
}));
export default function Material() {
const classes = useStyles();
return (
<div>
<h1>Material</h1>
<Grid
className={classes.root}
container
justify="space-around"
spacing={2}
>
<CompanyList companies={companies} data-test-id="companyList" />
</Grid>
</div>
);
}