在悬停/活动时更改材质UI ListItem子项

Question

考虑侧栏导航的以下组件结构：

<ListItem button dense component={CustomNavLink} to="/dashboard">
    <ListItemIcon>
        <DashboardIcon />
    </ListItemIcon>
    <ListItemText primary="Dashboard" />
</ListItem>

任务是在悬停时或当ListItemIcon变为活动时更改ListItemText和CustomNavLink外观。

请注意，CustomNavLink是一个扩展的React Router的NavLink组件，当它与当前路由匹配时，它会应用active类。

以下，有点hacky方式通过classes属性实现（简化和简化）

const styles =  {
    root: {
        ...
        '&.active, &:hover, &.active:hover': {
            '& path': {
                fill: 'red'
            },
            '& span': {
                color: 'red'
            }
        }
    }
};

（然后将classes应用于ListItem组件）

这似乎是一种非常糟糕的方式，因为嵌套组件的结构泄漏到父级的样式中...这类似于在“旧”CSS中执行此操作：

div:hover > ul > li > a {
    color: red;
}

什么是惯用的Material UI解决方法？

作为参考，这是如何在styled-components中完成的：

const CustomNavLink = styled(NavLink)`
    ...
    &:hover {
        ${ListItemIcon} {
            path: {
                fill: red;
            }
        }

        ${ListItemText} {
            color: red;
        }
    }
`;

Answer 1

请在悬停/活动时尝试以下示例来更改材质UI ListItem子项

const wrapperStyles = {
  parent: {
    backgroundColor: 'yellow',
    '&:hover $child': {
      color: 'red'
    }

  },
  child: {
    fontSize: '2em',
    padding: 24
  }
}