React MUI Class name collisions when using a library

Question

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

Answer 1

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>