CODEWITHSUNDEEP
reactjsmaterial-uishadow-dom
Mohammed Asif
Mohammed Asif

Reputation: 33

Material ui inside shadow dom is missing styles for subsequent invocation of webcomponent

We have a web component written in React with Material-ui. This webcomponent will be used in an angular application.

Initially we had an issue that the material styles were not getting applied to the elements inside the shadow dom. So we followed the solution given in here : How to mount styles inside shadow root using cssinjs/jss to use StylesProvider with insertionPoint of the jss set to an element inside the shadow dom.

This solution worked for us for the first time invocation of the web component. But in the angular hosting application we have code to conditionally render this webcomponent. When we render for the first time, this webcomponent renders perfectly fine. we see that the all the styles which are needed are inside the shadow dom. But for the subsequent rendering, this css/styles are missing from the shadow dom. Any idea how to go around with this issue?

Upvotes: 1

Views: 2051

Answers (1)

Mohammed Asif
Mohammed Asif

Reputation: 33

In "@material-ui/core": "^4.10.0", I was able to fix this issue by passing the "new Map()" for sheetsManager prop of StylesProvider when the web component is recreated. This is hacky, but it seems to work.

This is how it looks like.

<StylesProvider jss={jss} sheetsManager={new Map()}>

Upvotes: 2

Related Questions