如何使用和混音?

Question

是否有合适的方法使用蚁群与混音?

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

import styles from "antd/dist/reset.css";
export function links() {
return [
{
rel: "stylesheet",
href: styles,
}
]
}

Answer 1

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

实际上，有一个选项可以导出整个ant设计5个样式到一个css文件中，您可以将其包含在您的项目中。检查此部分:https://ant.design/docs/react/customize-theme#whole-export

Answer 2

在版本5+中，您所需要做的就是导入组件并使用。不需要再导入css了，就像这里提到的。你可以在app/root中添加一个ConfigProvider。如果您需要自定义主题，请使用TSX。

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

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

Answer 3

我使用了Whole export方法来使用loader生成样式

// app/routes/antd[.]css.tsx
import { ConfigProvider, type ThemeConfig, theme } from "antd";
import { extractStyle } from "@ant-design/static-style-extract";
import { type LoaderArgs } from "@remix-run/server-runtime";
import { getThemeSession } from "~/utils/theme.server";
const themeLight = {
token: {
colorPrimary: "#4cb75b",
colorPrimaryBg: "#dbf1db",
},
algorithm: [theme.defaultAlgorithm],
};
const themeDark: ThemeConfig = {
token: {
colorPrimary: "#55bf63",
// generate using https://ant.design/theme-editor
colorPrimaryBg: "#233327",
colorLink: "#55bf63",
colorLinkActive: "#3d994c",
colorLinkHover: "#7ccc84",
},
algorithm: [theme.darkAlgorithm],
};
export const loader = async ({ request }: LoaderArgs) => {
const themeSession = await getThemeSession(request);
const theme = themeSession.getTheme() || "light";
const css = extractStyle((node) => (
<ConfigProvider theme={theme === "dark" ? themeDark : themeLight}>
{node}
</ConfigProvider>
));
return new Response(css, {
status: 200,
headers: {
"Content-Type": "text/css",
},
});
};

然后你可以把它添加到root.tsx

的链接中

// app/root.tsx
export function links() {
return [
{
rel: "stylesheet",
href: "/antd.css",
},
];
}

当我有更多的时间，我将看看如何实现出口的需求，我认为它会工作的方法，如情感:https://github.com/remix-run/examples/blob/main/emotion/app/entry.server.tsx