reactjs - 在材质 ui 中像插值一样 sass 以获得像类名一样的 BEM
问题描述
const useStyles = makeStyles({
block: {
`${&}__element `: {
color: 'green',
}
},
});
上面的代码在材质 UI 中不起作用。有什么方法可以像' 插值一样插值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>
);
}
推荐阅读
- spring - 如果 @Configuration 类中存在空构造函数,则 Spring @DynamicPropertySource 不起作用
- php - .htaccess 删除 "?page="
- types - 为什么不同的数据类型有不同的存储大小
- emacs - 组织模式:乳胶导出。我想要边框的例子
- android - 如何连接一些带有音频流的视频和一些没有音频流的视频
- typescript - 反应原生时未安装的组件错误
- php - 从数组中递归提取键路径 - 不包括数字键
- javascript - 使用 REACTJS 中的 fetch() 函数进行 API CALL 时未加载数据
- javascript - 循环“冻结”我的网站。- 如何减少循环次数?
- java - 请求的资源 [/ServletTamil_war_exploded/hello-servlet] 不可用