Can you provide an example of integrating Antd？

[ggymzz]

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Share minimal reproduction. Examples of a minimal reproduction:

• PR with a failing test case
• ZIP file containing a minimal WXT project (be sure to include your lockfile!!)

⚠️ If you don't upload a minimal reproduction, your issue will be closed until a reproduction is added.

Why? https://antfu.me/posts/why-reproductions-are-required

Steps to reproduce the bug using the reproduction:

1. Install dependencies: pnpm i
2. Start dev mode: pnpm dev
3. Click this...
4. Do that...
5. Etc...

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Environment

Paste output here

Additional context

Add any other context about the problem here, otherwise you can delete this section.

[aklinker1]

No, just use it how you would in a regular project.

https://ant.design/docs/react/introduce

[sedationh]

@aklinker1 I try to use Antd 5 in content ui {createShadowRootUi} bt the style seems not work

except for that, in the shell output a lot of error log

i provide the mvp here https://github.com/sedationh/awesome-toc/tree/question

ples attention the branch is question

[aklinker1]

@sedationh Looks like by default, Ant adds component styles to the webpage's head element, not the shadow root. So basically, the styles are applied to the page, but the shadow root is isolated style-wise from the page, so they don't get applied to your UI.

They have docs for this exact case: https://ant.design/docs/react/compatible-style#shadow-dom-usage

As for WXT, createShadowRootUi handles creating the shadow root and the container. Just modify the onMount to look like this:

-     onMount: (container) => {
+     onMount: (container, shadow) => {
        const app = document.createElement('div');
        container.append(app);

        const root = ReactDOM.createRoot(app);
-       root.render(<App />);
+       root.render(
+        <StyleProvider container="shadow" />
+          <App />
+        <StyleProvider />
+       );
        return root;
      },

Here it is working:

As for the warnings, no idea whats going on there...

[sedationh]

@aklinker1 LGTM thank you~