JSSProvider not generating class prefix with classNamePrefix

Question

I'm using material-react in my React project. We are using material-react in both shell and micro-frontend. The class names generated by both shell and micro-frontend are being same viz., .jss1, .jss2 which is causing style collisions.

Im trying to generate unique class names for the micro-frontend, something like App1-{className} using JssProvider classNamePrefix prop, but still the classnames are generating as it is (.jss1, .jss2 etc). I have installed [email protected] as of now. I have tried many solutions from stackoverflow and github issues as well. But none of them are working for me.

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

Following is the css classes that are getting generated in prod environment.

I need something like App1-{className} for the class names, so that they don't clash with other styles with similar names.

I have followed these stackoverflow links, but unfortunately none of them are working for me.
React Admin displays very messed up
https://github.com/marmelab/react-admin/issues/1782

Please help me solve this thing. I feel i'm missing something very basic.

Answer 1

You could use the seed option of createGenerateClassName function which is part of @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>
  );
}

Answer 2

This part of the material-ui documenation solved my issue.

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

Strangely the JSSProvider solution was not working for me, whereas it was working for others. For those who faced similar issue, can use StyleProvider instead of JSSProvider.