在Material-UI中，如何在嵌套的样式规则中，使用makeStyles引用生成的类名？[重复]

Question

这个问题在这里已经有了答案:

如何在JSS的子类中应用样式。 (2个答案)

封闭 上月.

当使用 makeStyles在创建嵌套规则时，如何引用生成的类名？

例如，我有一个 "container "类，其中有嵌套的 "item "类元素，我想在样式定义中引用生成的 "item "类。我想在样式定义中引用生成的 "item "类。我可以让它对一个自定义的非生成类（"custom"）起作用，但同样的策略对生成类名不起作用。

https:/codesandbox.iosmaterial-demo-311tn?file=demo.js。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  container: {
    "& > .custom": {
      "&:first-child": {
        backgroundColor: "grey"
      }
    },
    // How do I make this work?
    "& > .item": {
      "&:first-child": {
        color: "white"
      }
    }
  },
  item: {
    padding: "20px"
  }
});

export default function Hook() {
  const classes = useStyles();
  return (
    <div className={classes.container}>
      <div className={`${classes.item} custom`}>Hello</div>
      <div className={`${classes.item} custom`}>World!</div>
    </div>
  );
}

Answer 1

在类名前加上一个 $ 而非 .

所以，与其说是

"& > .item"

做

"& > $item"

https:/codesandbox.iosmaterial-demo-ru95s?file=demo.js。