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
  }
}

Answer 2

@Patel Charul扩大了答案。如果您要更改悬停时多个孩子的样式。

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

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

2 个答案: