Sass, как интерполяция в материале пользовательского интерфейса, чтобы получить БЭМ, как имена классов

Question

const useStyles = makeStyles({
  block: {

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

вышеуказанный код не работает в пользовательском интерфейсе материала. Есть ли способ интерполировать parent selector '&', чтобы получить имя класса block__element, как интерполяция sass?

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