Material 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>
  );
}

如果你想使用class key（selected）而不是css class（Mui-selected），你可以这样写

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 重构为单独的组件以清理重复的代码。

现场示例