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

Question

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

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

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

标签： csscss-selectorsmaterial-ui

Answer 1

$用 a而不是 a为类名添加前缀.

所以，而不是

"& > .item"

做

"& > $item"

https://codesandbox.io/s/material-demo-ru95s?file=/demo.js