Material UI compatibility

[BGligorijevic]

Hello,

When using React Web Component I am unable to get Material UI to work with it.
No styles are recognized, and when I try using Dialog component, I get:
index.js:32 Uncaught TypeError: Cannot read property 'webComponentAttributeChanged' of undefined
at callLifeCycleHook (index.js:32)...

I guess it has something to do with Shadow DOM and CSS.
Is there any workaround for this?

[mnemanja]

Hi @BGligorijevic,
Have a try with this from the documentation:

ReactWebComponent.create(<App />, 'my-component', true);

[smilexu]

@BGligorijevic I have the exactly same issue, have you found solution ?

[smilexu]

@mnemanja it does not work unfortunately.

[smilexu]

In latest version, ReactWebComponent.create(, 'my-component', false) works for me, to switch off shadow dom. But that is not how we target. Seems we can inject styles in shadow dom somehow, working on that.

[BGligorijevic]

Hello guys,
Sorry for my late response, I gave up on this and went with native customElements registration and React bootstrap for my project, it all works without problems.
Sorry for not being able to help you, I do not have a solution for this.
Have a good day,

Boris

[smilexu]

Found a solution, see here

https://codesandbox.io/s/04j9lxymow

it can help you inject styles indo shadow dom, but need to refactor react-web-component a little bit.

[mnemanja]

@BGligorijevic, then you might as well close this ticket.