在 Remix 中使用 Ant Design

在 Remix.js 中使用 Ant Design 会出现首次渲染样式丢失的问题，参考 Ant Design 官方的解决方案 整体导出

npm

npm i @ant-design/static-style-extract
npm i cross-env tsx -D

bun

bun i @ant-design/static-style-extract
bun i cross-env tsx -D

pnpm

pnpm i @ant-design/static-style-extract
pnpm i cross-env tsx -D

yarn

yarn add @ant-design/static-style-extract
yarn add cross-env tsx -D

{
    "scripts": {
        "predev": "tsx ./scripts/genAntdCss.tsx",
        "prebuild": "cross-env NODE_ENV=production tsx ./scripts/genAntdCss.tsx"
    },
    "dependencies": {
        "@ant-design/static-style-extract": "^1.0.2"
    },
    "devDependencies": {
        "cross-env": "^7.0.3",
        "tsx": "^4.15.6"
    }
}

import fs from "fs"

import { extractStyle } from "@ant-design/static-style-extract"
import { ConfigProvider } from "antd"

const outputPath = "./app/antd.min.css"

const css = extractStyle(node => <ConfigProvider theme={{ token: { colorPrimary: "red" } }}>{node}</ConfigProvider>)

fs.writeFileSync(outputPath, css)

import "./antd.min.css"

如果有自定义主题的需求，只需要传递给 ConfigProvider 相应的配置即可：

const css = extractStyle(node => <ConfigProvider theme={{ token: { colorPrimary: "red" } }}>{node}</ConfigProvider>)

注意

这种办法只能是妥协之计，打包出来的 css 文件很大。具体的优化还需要官方实现