在 Material-UI 中，如何使用 makeStyles 在嵌套样式规则中引用生成的类名?

Question

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

例如，我有一个"容器"类，其中包含嵌套的"item"类元素。我想在样式定义中引用生成的"item"类。我可以让它适用于自定义的非生成类("自定义"(，但相同的策略不适用于生成的类名。

https://codesandbox.io/s/material-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.io/s/material-demo-ru95s?file=/demo.js