Dodge theme from certain NodeJS modules in ReactJS

Question

I am writing a single page application using ReactJS and MaterialUI. Some of my components doesn't match MaterialUI docs. I found these components' styles are being updated by another NodeJS module (@craftercms/studio-ui) which is using same MaterialUI library.

Is there a way in ReactJS or MaterialUI to not load styles from specific NodeJS modules?

I know one way is to simply override styles in my theme but maintenance of that will not be fun.

Answer 1

You need to create your own theme and add an MUI's ThemeProvider (from @material-ui/styles) component surrounding your App.

You're probably using our CrafterCMSNextBridge component. That component has it's own theme provider, so make sure your ThemeProvider is inside so that one is the prevailing one.

Something like this…

<CrafterCMSNextBridge>
  <ThemeProvider theme={yourCustomTheme}>
    <App />
  </ThemeProvider>
</CrafterCMSNextBridge>

Worth noting that in a coming version of our package, it'll be easier to configure the theme to use.