I’m working on a micro-frontend application using Module Federation. Both the host and the remote module use Chakra UI, but each one has its own ChakraProvider and theme.

The issue I’m facing:

• The host has its own theme.

• The remote also has its own theme.

• When both are loaded together, styles conflict (CSS variables override each other, global styles clash).

It looks like Chakra creates isolated theme contexts, but since both inject global styles, one ends up overriding the other.

What’s the recommended way to handle multiple Chakra themes in a micro-frontend setup?

Should I:

• Let only the host provide a single ChakraProvider and theme, and make the remote consume it?

• Or, wrap each remote with its own ChakraProvider but use resetCSS={false} to avoid global overrides?

• Or, is there another best practice (e.g., sharing the theme through federation)?