JSSProvider 不使用 classNamePrefix 生成类前缀

Question

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

我试着去产生微前端独特的类名，像App1-{className}使用JssProviderclassNamePrefix道具，但还是被类名产生，因为它是（.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 显示非常混乱
https://github.com/marmelab/react-admin/issues/1782

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

Answer 1

您可以使用属于以下部分的功能seed选项：createGenerateClassName@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>
  );
}