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 react-jss@10.0.0 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.

score 9 · Accepted Answer · answered Nov 20 '19 at 09:45

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

I was using productionPrefix, but this one seems to be more apt. I was using JSSProvider which was not working at all. Stumbled upon this part of the documenation and used StyleProvider. It worked instantly. — Prithvi, Nov 20 '19 at 09:50

score 2 · Answer 2 · answered Nov 20 '19 at 09:45

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.

score 0 · Answer 3 · answered Nov 20 '19 at 08:45

0

Have you tried to install same versions of material-ui in all of your libraries?

I had the same problem, I have different material ui versions in my app and in my custom component library. Installing the same version works for me.

answered Nov 20 '19 at 08:45

BeRaN TV

1

Yea, i had same versions of the material ui library installed everywhere. This part of the documentation solved my issue. https://material-ui.com/styles/api/#creategenerateclassname-options-class-name-generator – Prithvi Nov 20 '19 at 09:42

JSSProvider not generating class prefix with classNamePrefix

3 Answers3