CODEWITHSUNDEEP
cssreactjsmaterial-uiname-collision
user17613233
user17613233

Reputation: 31

React MUI Class name collisions when using a library

We integrated a library into our Creatives project similar to how is being used in one of our pages.

I noticed that when i interact with a graph there are lots of empty <style data-jss> tags are being generated and are overriding the current style of the page.

Those styles are being injected by mui and are overriding initial styles and breaking the current page design

Upvotes: 2

Views: 688

Answers (1)

user17613233
user17613233

Reputation: 31

The solution for this name collusion was found in mui docs https://v4.mui.com/styles/api/#creategenerateclassname-options-class-name-generator

const generateClassName = createGenerateClassName({
  seed: 'ctv-'
});

by adding

 <ThemeProvider>
      <StylesProvider generateClassName={generateClassName}>
...
</TheamProvider>

Upvotes: 1

Related Questions