如何使用 Material UI 为 css 选择器设置父级答案

【问题标题】：How to set a parent for css selectors with Material UI如何使用 Material UI 为 css 选择器设置父级
【发布时间】：2021-10-13 17:53:58
【问题描述】：

我正在尝试使用 Material UI 创建一个 Chrome 扩展程序。我使用了inject方法，所以扩展注入了所有的Material UI样式。

我想知道是否可以为 Material UI 样式添加父选择器。

当你看这个例子时：

<style data-jss="" data-meta="MuiPaper">
.MuiPaper-root {
  color: rgba(0, 0, 0, 0.87);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  background-color: #fff;
}

... 

</style>

我想得到什么：

#MY-ROOT-ELEMENT .MuiPaper-root { }

【问题讨论】：

请勿发布代码、数据、错误消息等的图片 - 将文本复制或输入到问题中。 How to Ask

标签： css google-chrome-extension material-ui jss

【解决方案1】：

我已经用另一种方式修复了它：

import { StylesProvider, jssPreset } from "@material-ui/styles";
import { create } from "jss";

const createGenerateId = () => {
   return (rule, sheet) => {
      return `${sheet.options.classNamePrefix}-${rule.key}-***ENTER-UNIQUE-ID-FOR-APP***`;
      };
   };

const jss = create({
    ...jssPreset()
});

ReactDOM.render(
    <StylesProvider jss={jss} generateClassName={createGenerateId()}>
       ...
    </StylesProvider>,
    rootElement
);

这样，如果您在具有 Material UI 的页面中加载 Chrome 扩展程序，样式将不会相互干扰。

【讨论】：