Reactjs 在material ui中使用类似sass的插值来获得类似于BEM的类名

上述代码在物料界面中不起作用。是否有任何方法可以像

sass

的插值一样插入

父选择器“&”

以获得classname

block\u元素

<代码>&本身将被

.classname generatedforblock

替换，因此您可以执行以下操作：

const useStyles = makeStyles({
  block: {

   `${&}__element `: {
      color: 'green',
    }
  },
});

下面是一个完整的工作示例：

const useStyles = makeStyles({
  block: {
    "&__element": {
      color: "green"
    }
  }
});

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
const useStyles=makeStyles({
区块：{
背景颜色：“浅蓝色”，
“&_元素”：{
颜色：“绿色”
}
}
});
导出默认函数App（）{
const classes=useStyles（）；
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

---

谢谢，成功了！我丢失了拼图的

${classes.block}\u元素

部分。

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

const useStyles = makeStyles({
  block: {
    backgroundColor: "lightblue",
    "&__element": {
      color: "green"
    }
  }
});

export default function App() {
  const classes = useStyles();
  return (
    <div className={classes.block}>
      <h1 className={`${classes.block}__element`}>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}