JSSProvider 不使用 classNamePrefix 生成类前缀

Question

我在我的 React 项目中使用材料反应。我们在 shell 和微前端中都使用了 material-react。 shell 和微前端生成的类名相同，即.jss1、.jss2，这会导致样式冲突。

我正在尝试为微前端生成唯一的类名，例如使用 JssProvider classNamePrefix 属性的 App1-{className}，但类名仍然按原样生成（.jss1、.jss2 等）。到目前为止，我已经安装了react-jss@10.0.0。我也尝试了许多来自 stackoverflow 和 github 问题的解决方案。但它们都不适合我。

import React from "react";
import ReactDOM from "react-dom";
import { JssProvider } from "react-jss";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import App from "./components/App";
import "./styles.css";
import { Provider } from "react-redux";

const routing = (
  <JssProvider classNamePrefix="App1">
    <Provider>
      <Router>
        <Switch>
          <Route exact path="/" component={App} />
        </Switch>
      </Router>
    </Provider>
  </JssProvider>
);

ReactDOM.render(routing, document.getElementById("root"));

以下是在 prod 环境中生成的 css 类。

我需要像App1-{className} 这样的类名，这样它们就不会与其他具有相似名称的样式发生冲突。

我已关注这些 stackoverflow 链接，但不幸的是，它们都不适合我。
React Admin displays very messed up
https://github.com/marmelab/react-admin/issues/1782

请帮我解决这个问题。我觉得我错过了一些非常基本的东西。

Answer 1

您是否尝试在所有库中安装相同版本的 material-ui？

我遇到了同样的问题，我的应用程序和自定义组件库中有不同的材质 ui 版本。安装相同的版本对我有用。

Answer 2

material-ui 文档的这一部分解决了我的问题。

https://material-ui.com/styles/api/#creategenerateclassname-options-class-name-generator

奇怪的是，JSSProvider 解决方案不适用于我，而它却适用于其他人。对于遇到类似问题的人，可以使用 StyleProvider 代替 JSSProvider。

Answer 3

您可以使用createGenerateClassName 函数的seed 选项，它是@material-ui/core/styles 的一部分：

options.seed（字符串 [可选]）：默认为 ''。用于唯一标识生成器的字符串。当在同一个文档中使用多个生成器时，它可以用来避免类名冲突。

import React from "react";
import ReactDOM from "react-dom";
import { StylesProvider, createGenerateClassName } from '@material-ui/core/styles';
import { Provider } from "react-redux";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import App from "./components/App";
import "./styles.css";

const generateClassName = createGenerateClassName({
  seed: 'App1',
});

export default function App() {
  return (
    <StylesProvider generateClassName={generateClassName}>
      <Provider>
        <Router>
          <Switch>
            <Route exact path="/" component={App} />
          </Switch>
        </Router>
      </Provider>
    </StylesProvider>
  );
}