在材料用户界面中进行类似于sass的插值,以获得类似于BEM的类名。

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

Edit optimistic-leftpad-nkkh7

给TA打赏
共{{data.count}}人
人已打赏
未分类

我想用javascript写一个函数,返回一个数字在另一个数字中出现的次数[关闭]。

2022-9-8 7:09:40

未分类

java "main "线程中的异常(已解决)[重复]。

2022-9-8 7:09:42

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索