Material UI React中:not(:last-child)选择非最后子元素样式失效问题

你写的"&:not(:last-child)"选择器目标是绑定了icons类的元素本身（也就是设置了classes={{ root: classes.icons }}的那个列方向Grid容器），根本没有选中它的内部子元素，自然不会对内部的Grid子项生效。
你之前能成功给所有子元素设置样式，核心是写了&>*，这部分才是明确匹配当前类元素下所有直接子节点的逻辑，失效写法完全缺失了子元素匹配的部分。
补充JSS选择器规则：在makeStyles的语法里，&永远代表当前绑定了对应类名的元素本身，如果你不追加子元素选择器，后面跟的所有伪类、属性选择器都是作用在当前类绑定的元素上，和它的子节点无关。你写的失效规则，实际效果是「当这个外层Grid容器本身不是它父元素的最后一个子节点时，给它自己设置红色背景」，和你预期给内部子项加样式的目标完全不符。

补全子元素匹配逻辑即可，通用适配你当前结构的写法如下：

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

如果需要更精准匹配MUI的Grid子项，也可以写成"& > .MuiGrid-item:not(:last-child)"，两种写法在你当前的JSX结构下效果一致。

内容的提问来源于stack exchange，提问作者sir-haver