Umi extra entry using ant design

Question

I write a Chrome Extension using Umi 4, and add a contentscript entry in the Umi configuration. This contentscript script uses Ant Design5 components.

export default defineConfig({
  chainWebpack(memo, { env }) {
    memo
      .entry('background')
        .add('./src/crx/background.ts')
        .end()
      .entry('content-script')
        .add('./src/crx/content-script.tsx')
        .end()
  },
});

However, the compiled CSS does not perform on-demand loading of Ant Design. May I know what additional configuration is needed and how to configure it?

I hope that the compiled CSS can load Ant Design styles on demand.

Answer 1

I found the reason and solution, because the styles generated by @ant-design/cssinjs are built into the head by default, and I wrapped a layer of ShadowRoot outside, which caused the style to not take effect. This problem can be solved by configuring StyleProvider.container.

<StyleProvider container={shadow}>
  <App />
</StyleProvider>