Using different version of Antd in Micro Frontend apps

[thesonpb]

I am trying to integrate my remote app (using antd version 4.24.10) into my host app (using antd version 5.6.1) using Webpack module federation.

In my remote app, I import the 'antd/dist/antd.css' and use primary Button (Remote button).

In my host app, I use ConfigProvider with the colorPrimary 'red' and use primary Button (Host button).

The style is not applied to the host button (it's just the default primary, and when I hover the host button, the background change to red). I though that the import of 'antd/dist/antd.css' is only applied to the remote app, I don't know why it overwrite the style of antd in the host app.

Here is my host app code:

<ConfigProvider
    theme={{
      token: {
        colorPrimary: "red",
      },
    }}
  >
      <HostApp>
          <Button type="primary">Host button</Button>
          <RemoteApp/>
      </HostApp>
  </ConfigProvider>,

Here is my remote app code:

import 'antd/dist/antd.css';
...
<Button type="primary">Remote button</Button>

When I hover the host button:

[PhongLeeHiChat]

I have the same issues. Even those I using the same version antd and put the ConfigProvider as host. The host app applied custom style correctly; but the remote app applied the default style of antd.

[bertanyaman]

any fix about the issue ?