search

LukasBombach / react-web-component

Create Web Components with React
285 stars 40 forks source link

Material UI compatibility #12

Open BGligorijevic opened 6 years ago

BGligorijevic commented 6 years ago

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 commented 5 years ago

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

ReactWebComponent.create(<App />, 'my-component', true);
smilexu commented 5 years ago

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

smilexu commented 5 years ago

@mnemanja it does not work unfortunately.

smilexu commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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