材料UI反应选择所有的孩子除了最后一个孩子不工作?

Question

我可以选择所有的子元素:

const useStyles = makeStyles(theme => ({
icons: {
"&>*": {
backgroundColor: "red",
},
},
}))

JSX:

<Grid item>
<Grid container direction="column" classes={{ root: classes.icons }}>
<Grid item>
<img src={facebook} alt="facebook" />
</Grid>
<Grid item>
<img src={twitter} alt="twitter" />
</Grid>
<Grid item>
<img src={instagram} alt="instagram" />
</Grid>
</Grid>
</Grid>

但是选择除最后一个子元素外的所有子元素都不能工作:

icons: {
"&:not(:last-child)": {
backgroundColor: "red",
},
},

我做错了吗?

Answer 1

我使用sx，并且能够实现您正在寻找的。

const gridSx = {
"& >*": {
backgroundColor: "green"
},
"& :not(:last-of-type)": {
backgroundColor: "red"
}
};
...
<Grid container direction="column" sx={gridSx}>...

这里是一个沙盒:sanbox