为什么颜色属性不应用于元素？答案

【问题标题】：why color property not applied on element?为什么颜色属性不应用于元素？
【发布时间】：2023-01-03 08:34:29
【问题描述】：

我正在尝试更改图标的颜色。我正在使用颜色属性来更改图标轮廓颜色。但它不适用。我正在那样尝试。

 "& .MuiListItemIcon-root": {
    color: "red"
  },

整个代码是

const Drawer = styled(MuiDrawer, {
  shouldForwardProp: (prop) => prop !== "open"
})(({ theme, open }) => ({
  width: drawerWidth,
  flexShrink: 0,
  whiteSpace: "nowrap",
  boxSizing: "border-box",
  "& .MuiListItemIcon-root": {
    color: "red"
  },
  ...(open && {
    ...openedMixin(theme),
    "& .MuiDrawer-paper": openedMixin(theme)
  }),
  ...(!open && {
    ...closedMixin(theme),
    "& .MuiDrawer-paper": closedMixin(theme)
  })
}));

这是我的代码 https://codesandbox.io/s/priceless-hooks-5jcjym?file=/demo.tsx:1700-2144

当我应用昆虫颜色 css 但没有反映时。不知道我哪里做错了。

**预期输出：图标变为红色 **

【问题讨论】：

color 是您指定元素文本颜色的方式，但是您的<div> 不包含任何文本...您可能在想background-color？或者也许我遗漏了一些关于你的问题的东西......
我使用 MaterialUI 的经验非常有限，但是，是的，我认为您不能使用 CSS color 属性来设置生成的 <svg ...> 元素的颜色，从您的链接来看，这就是正在发生的事情。文档建议使用 color="..." 属性：mui.com/material-ui/icons/#color，尝试应用它。
@TimLewis 我想让这个图标变成红色
图标的默认轮廓是白色#fff。我想让它变红变成红色图标

标签： javascript reactjs react-hooks material-ui

【解决方案1】：

可能有一个通用的 css 覆盖这个，试试

  "& .MuiListItemIcon-root": {
    color: "red !important"
  },

【讨论】：