add React UI library ant-design, but have no css style

[LiMao00]

What version of astro are you using?

2.0.17

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

pnpm

What operating system are you using?

windows

What browser are you using?

chrome

Describe the Bug

add React UI library ant-design, but have no css style

the git is https://gitee.com/limao-xs/lm-astro-basics

because have the question(https://hub.nuaa.cf/vitejs/vite/issues/11064), I rewrite the defineConfig

export default defineConfig({
	integrations: [react()],
	// <<<<<<<<<<<<<<<<<<<<<<<<< m_sp m
	vite: {
		resolve: {
			alias: {
				"antd/dist/reset.css": path.join(
					__dirname,
					"node_modules/antd/dist/reset.css"
				),
				antd: path.join(__dirname, "node_modules/antd/dist/antd.js"),
			},
		},
	},
);

but how to import the antd/dist/reset.css?

now:

expectation：

Link to Minimal Reproducible Example

https://gitee.com/limao-xs/lm-astro-basics

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

Please provide a small reproduction via astro.new and we can take a look. Thank you!

[brycehanscomb]

Ant Design components are built with a CSS-in-JS solution, so they need JS running on the client to have any styles.

Astro requires you to opt-in to client-side JS with the client:load directive.

Add that to your React component and it should have styles applied.

[ChemaCLi]

Ant Design components are built with a CSS-in-JS solution, so they need JS running on the client to have any styles.

Astro requires you to opt-in to client-side JS with the client:load directive.

Add that to your React component and it should have styles applied.

Thanks! It works. Now I'm having an common and annoying behavior: the ant design flash 💥
This happens using NextJS too.

There is a workaround on Next. I'll try something similar