Question

我正在使用material-ui ListItem来显示我的导航栏项目。

我编写了以下CSS代码，以显示选择每个项目时的样式。

<List>
  {routes.map(route => (
    <Link to={route.path} key={route.name} style={{ textDecoration: "none" }}>
      <ListItem button key={route.name} className={classes.listWrap}>
        <ListItemText primary={route.name} className={classes.listItemText} />
      </ListItem>
    </Link>
  ))}
</List>;

CSS

listWrap: {
  "&:hover": {
    border: "1px solid #6c757d",
    color: "black"
  },
  textAlign: "center",
  "&:active": {
    background: "#6c757d",
    color: "black"
  }
}

当我选择一个ListItem时，样式不起作用

我们如何解决？

Answer 1

您可以使用focus代替active。

listWrap: {
    "&:hover": {
      border: "1px solid #6c757d",
      color: "black"
    },
    textAlign: "center",
    "&:focus": {
      background: "#6c757d",
      color: "black"
    }
  }

材质UI ListItem在React.js中选择样式

1 个答案: