如何将 antd 与 remix 一起使用？答案

【问题标题】：How to use antd with remix?如何将 antd 与 remix 一起使用？
【发布时间】：2022-12-30 00:02:35
【问题描述】：

是否有将 ant 与 remix 一起使用的正确方法？

使用 antd (ant.design) 版本 5。尝试将以下内容添加到 remix 项目中的 root.tsx（以及路由文件）文件中，但样式仍然不起作用：

import styles from "antd/dist/reset.css";

export function links() {
   return [
     {
       rel: "stylesheet",
       href: styles,
     }
   ]
}

【问题讨论】：

标签： antd remix.run

【解决方案1】：

在 5+ 版本上，您需要做的就是导入组件并使用。不再需要导入 css，如here 所述。如果您需要自定义主题，您可以将 ConfigProvider 添加到 app/root.tsx。

import { Button, DatePicker } from 'antd';

export default function Index() {
  return (
    <>
      <Button type="primary">PRESS ME</Button>
      <DatePicker placeholder="select date" />
    </>
  );
}

重置文件应该添加到 app/root.tsx，只有当你需要重置基本样式时。

【讨论】：

我试过了但没有用，样式仍然没有应用。

【解决方案2】：

遗憾的是，现在没有捆绑的 css 文件就没有简单的方法来使用 Ant Design。由于 remix 尚不支持捆绑 css，因此也没有选项可以覆盖 esbuild 配置以添加此类插件。但是 Remix 团队正在研究这样的功能：https://github.com/remix-run/remix/discussions/1302#discussioncomment-1913510

【讨论】：