I have React module federation app.
I load several remote components, which are being developed by other development teams in the company.
lately, we’ve ran into an issue where the css of the remote components interferes with each other.
Meaning the css from component A influences component B.
We want to block this kind of beaviour, and ideally I (as the host app) want to provide a solution which will require nothing from components A and B (or alternatively, the minimum amount of work)
From a research I did, I found out about couple options, each with its own downsides.
-
css modules – it seems like a good solution, but the problem I have with that, is that it will require the other dev teams to refactor their code.
-
shadow dom – this seemed at first like a better idea, because it requires only a little change in the code of the other dev teams, but I later found out that if they use createPortal, then it all breaks (because they may render outside of the shadow dom which will cause their css to not apply on the portal).
Its been couple weeks since I first encountered this problem, and I still haven’t come up with a good enough solution.
I’d like to hear how you achieved the css isolation in your mf projects, or how you’d approach this problem