时间戳

首页 > 解决方案 > 如何在material-ui中的：last-child中使用：hover？

css - 如何在material-ui中的：last-child中使用：hover？

问题描述

我将 React 与 material-ui 一起使用，并且有一个带有列表的菜单组件，此菜单中的最后一项与其他菜单不同，我使用 :last-child 并且它是功能性的，问题是当我尝试使用 :hover 时在最后一个元素中。

风格：

const useStyles = makeStyles((theme) => ({
menu: {
  textDecoration: 'none',
  color: theme.palette.navy.default,
  cursor: 'pointer',
  fontWeight: 'bold',
  textTransform: 'uppercase',
  '&:last-child': {
    background: theme.palette.orange.default,
    borderRadius: '5em',
    color: theme.palette.white.default,
    // using hover in the last child item not work
    '&:hover': {
      background: theme.palette.green.default,
    },
  },
 },
}));

零件：

...
const classes = useStyles();

<MenuList>
    {menu.map((item, index) => (
        <MenuItem selected={false} key={index} className={classes.menu}>
            {item.title}
        </MenuItem>
    ))}
</MenuList>

你知道怎么解决吗？

标签： cssreactjsmaterial-ui

解决方案

我创建了一个新组件，我在其中重新测试了那些不起作用的选项。我包含了@Sanish Joseph 以前不起作用的答案，这次使用这个新组件，它起作用了。

在上下文中，我创建了一个菜单映射对象数组，每个对象都有另一个带有子菜单的对象数组。在发现问题之前，我一直在丢弃元素。在我用来显示子菜单的 Popper 组件中，有一个名为“disablePortal”的属性。此属性导致“最后一个孩子”中的“悬停”不起作用。

推荐阅读