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

Material UI and ReactJS, how to style a selected ListItem using withStyles?

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

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

  • withStyles() 是 HOC，通常与 class-based 组件一起使用。
  • makeStyles()另一方面是hook creator，hooks更适合在函数式组件中使用。我建议您和您的 children 使用这种方法，因为越来越多的图书馆正在采用钩子作为主要 API 而不是 HOC。

您可以看到 ListItem css classes 和 class 键 here 的列表，以了解要应用到哪个 class .

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键（选中）代替cssclass（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到一个单独的组件来清理重复的代码。

实例