const useStyles = makeStyles({
block: {
`${&}__element `: {
color: 'green',
}
},
});
上面的代码在素材界面中无法使用。有什么办法可以将 parent selector '&'
获取班级名称 block__element
恰似 sass
的插值?
你不需要任何特殊的语法。&
本身将被替换为 .classNameGeneratedForBlock
,所以你可以做以下的工作。
const useStyles = makeStyles({
block: {
"&__element": {
color: "green"
}
}
});
这是一个完整的工作例子
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>
);
}