material-ui ListItemButton将样式传递给ListItemText,但未传递给ListItemIcon,

gv8xihay 于 4个月前发布在其他

关注(0)|答案(1)|浏览(78)

重复问题

我搜索了现有的问题

当前行为😯

我可以将颜色样式应用到 <ListItemButton>,并将它们传递给子元素 <ListItemText>,但它们不会传递给 <ListItemIcon>。我想让我的悬停效果将文本颜色应用于按钮下的所有内容，但我没有找到方法做到这一点。背景颜色按预期工作，但 'color' 属性不起作用。

<ListItemButton
        sx={{
          "&.Mui-selected": {
            backgroundColor: "red",
            color: "white",
            ":hover": {
              backgroundColor: "yellow",
              color: "gray"
            }
          },
          ":hover": {
            backgroundColor: "blue",
            color: "yellow"
          }
        }}
        selected={selected}
        onClick={() => setSelected((prev) => !prev)}
      >
    <ListItemIcon>
          <AcUnitIcon />
    </ListItemIcon>
    <ListItemText primary="Some Text" />
 </ListItemButton>

Here is a CodeSandbox: [](https://codesandbox.io/s/mui-listitemicon-not-taking-style-from-parent-listitembutton-y9qj9k?file=/src/App.js:560-1144)

### Expected behavior 🤔

I would expect both the text and the icon to get the button's style.  I can hover the text or the icon, but not both.

### Steps to reproduce 🕹

Steps:

[](https://codesandbox.io/s/mui-listitemicon-not-taking-style-from-parent-listitembutton-y9qj9k?file=/src/App.js:560-1144)
https://codesandbox.io/s/mui-listitemicon-not-taking-style-from-parent-listitembutton-y9qj9k?file=/src/App.js:560-1144

### Context 🔦

I want to hover and select the List item parent and have the style apply to both the text and icon

### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>

浏览器：Chrome 版本 103.0.5060.114 (官方构建) (32位)
系统：
OS:Windows 10 10.0.19044
Binaries:
Node: 16.14.2 - C:\Program Files
odejs
ode.EXE
Yarn: 1.22.15 - C:Program Files
odejs\yarn.CMD
npm: 8.2.0 - C:\Program Files
odejs
pm.CMD
Browsers:
Chrome: 103.0.5060.114
Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.44)
npmPackages:
@emotion/react: ^11.9.3 => 11.9.3
@emotion/styled: ^11.9.3 => 11.9.3
@mui/base: 5.0.0-alpha.87
@mui/icons-material: ^5.8.4 => 5.8.4
@mui/material: ^5.8.6 => 5.8.6
@mui/private-theming: 5.8.6
@mui/styled-engine: 5.8.0
@mui/system: 5.8.6
@mui/types: 7.1.4
@mui/utils: 5.8.6
@types/react: ^18.0.14 => 18.0.14
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^4.7.4 => 4.7.4