sass 喜欢在 material ui 中进行插值以获得类似类名的 BEM

Question

const useStyles = makeStyles({
  block: {

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

以上代码在 material UI 中不起作用。有什么方法可以像 sass 的插值一样对 parent selector '&' 进行插值以获得类名 block__element 吗？

Answer 1

你不需要任何特殊的语法。 & 本身将被 .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>
  );
}

sass 喜欢在 material ui 中进行插值以获得类似类名的 BEM

sass like interpolation in material ui to get BEM like classnames

bem

reactjs

material-ui