材质UI和ReactJS，如何使用withStyles为选定的ListItem设置样式？

Question

我想更改所选ListItem的样式，如this codesandbox所示。
在沙箱中，我使用了全局css样式表，但我想使用withStyle technique。
我该怎么办？
我应该使用什么className来定位 selected ListItem？

Answer 1

如果您使用的是无状态功能组件，则应使用makeStyles()而不是withStyles()。

• withStyles()是HOC，通常与基于类的组件一起使用。
另一方面，
• makeStyles()是一个挂钩创建者，挂钩更适合于功能组件。我建议您和您的孩子使用这种方法，因为越来越多的库将钩子作为主要API而不是HOC。

您可以查看ListItem CSS类和类键here的列表，以了解要应用于哪个类。

const useStyles = makeStyles({
  root: {
    "& .Mui-selected": {
      backgroundColor: "pink",
      color: "red",
      fontWeight: "bold"
    },
    "& .Mui-selected:hover": {
      backgroundColor: "tomato"
    }
  }
});

function App() {
  const [selected, setSelected] = React.useState("home");
  const styles = useStyles();

  return (
    <List className={styles.root}>
      ...
    </List>
  );
}

如果要使用类键（选定）而不是css类（Mui选定），则可以这样编写

const useStyles = makeStyles({
  root: {
    "&$selected": {
      backgroundColor: "pink",
      color: "red",
      "&:hover": {
        backgroundColor: "tomato"
      }
    }
  },
  selected: {}
});

并应用于这样的组件

<List>
  <ListItem
    classes={{
      root: styles.root,
      selected: styles.selected
    }}
    ...
  >
    ...
  </ListItem>
  ...
</List>

这时，您应该考虑将ListItem重构为一个单独的组件，以清理重复的代码。

实时示例