JSSProvider 不生成带有 classNamePrefix 的 class 前缀

Question

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

我正在尝试为微前端生成唯一的 class 名称，例如 App1-{className} 使用 JssProvider classNamePrefix 道具，但 class 名称仍然生成为它是（.jss1、.jss2 等）。到目前为止，我已经安装了 react-jss@10.0.0。我也尝试了很多来自 Whosebug 和 github 问题的解决方案。但是 none 对我有用。

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

以下是在生产环境中生成的 css classes。

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

我已经关注了这些 Whosebug 链接，但不幸的是 none 对我有用。

https://github.com/marmelab/react-admin/issues/1782

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

Answer 1

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

我有同样的问题，我的应用程序和自定义组件库中有不同的 material 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 (String [optional]): Defaults to ''. The string used to uniquely identify the generator. It can be used to avoid class name collisions when using multiple generators in the same document.

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

JSSProvider 不生成带有 classNamePrefix 的 class 前缀

JSSProvider not generating class prefix with classNamePrefix

javascript

reactjs

material-ui

jss