在悬停/活动时更改材质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

@Patel Charul 的扩展答案。如果您想在悬停时更改多个子项的样式。

const wrapperStyles = {
  parent: {
    backgroundColor: 'yellow',
    '&:hover': {
      '& $child1': {
        color: 'red'
      },
      '& $child2': {
        color: 'blue'
      }
  },
  child1: {
    fontSize: '2em',
    padding: 24
  },
  child2: {
    fontSize: '4em',
    padding: 28
  }
}

Answer 2

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

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

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