为何color属性未生效？MUI ListItemIcon颜色修改问题排查

问题原因 #

你当前的CSS选择器& .MuiListItemIcon-root未正确命中目标元素——ListItemIcon实际嵌套在MuiDrawer-paper内部，而非直接作为MuiDrawer的子元素。即便检查工具显示CSS已应用，也会因选择器优先级不足或元素匹配错误，导致样式被默认规则覆盖。

解决方案 #

方法1：修正选择器层级 #

调整选择器，包含MuiDrawer-paper层级，确保精准命中目标元素：

const Drawer = styled(MuiDrawer, {
  shouldForwardProp: (prop) => prop !== "open"
})(({ theme, open }) => ({
  width: drawerWidth,
  flexShrink: 0,
  whiteSpace: "nowrap",
  boxSizing: "border-box",
  // 修正选择器，包含MuiDrawer-paper层级
  "& .MuiDrawer-paper .MuiListItemIcon-root": {
    color: "red"
  },
  ...(open && {
    ...openedMixin(theme),
    "& .MuiDrawer-paper": openedMixin(theme)
  }),
  ...(!open && {
    ...closedMixin(theme),
    "& .MuiDrawer-paper": closedMixin(theme)
  })
}));

方法2：直接定制ListItemIcon组件 #

若不想修改Drawer的样式，可直接创建自定义样式的ListItemIcon：

import { ListItemIcon } from "@mui/material";
import styled from "@mui/material/styles/styled";

const StyledListItemIcon = styled(ListItemIcon)({
  color: "red"
});

之后在Drawer的列表项中使用StyledListItemIcon替代原生ListItemIcon即可。

方法3：强制覆盖SVG颜色 #

部分Material-UI图标基于SVG渲染，可直接针对SVG元素设置颜色：

"& .MuiDrawer-paper .MuiListItemIcon-root svg": {
  color: "red"
  // 若仍不生效，可添加!important强制覆盖（仅作为备选方案）
  // color: "red !important"
}

内容的提问来源于stack exchange，提问作者user944513