AntDesign

开始

npm install antd --save

自动导入

vite

import AutoImport from "unplugin-auto-import/vite";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
   // ......
   plugins: [
     react(),
     AutoImport({
       // 手动声明自动导入组件
       imports: [{ antd: ["Button", "Form", "Input", "Flex", "message"] }],
       resolvers: [
         IconsResolver({
           prefix: false,
           enabledCollections: ["ant-design"],
           alias: { antd: "ant-design" },
           extension: "jsx",
         }),
         // icon使用示例：<AntdPlusOutlined />
       ],
       eslintrc: {
         enabled: true,
         filepath: "./eslintrc-auto-import.json",
       },
       dts: "auto-imports.d.ts",
     }),
     Icons({ autoInstall: true, compiler: "jsx" }),
  ]
}

注：

icon自动引入可能需要手动额外安装 @svgr/plugin-jsx

自定义样式

CSS变量

在开启CSS变量模式下，不同主题下的样式可以共享，样式体积更小且切换性能优秀；

CSS模式定制主题同上面相同；

import { ConfigProvider } from "antd";
const container = document.getElementById("root") as HTMLDivElement;

ReactDOM.createRoot(container).render(
  <React.StrictMode>
    {/* 开启CSS模式，并关闭hash值生成 */}
    <ConfigProvider theme=>
      <App />
    </ConfigProvider>
  </React.StrictMode>,
);

主题变量

通过配置主题变量（Seed Token），快速生成主题色主题

const theme = { token: { colorPrimary: "#dc4c3e" }, cssVar: true, hashed: false };

ReactDOM.createRoot(container).render(
  <React.StrictMode>
    <ConfigProvider theme={theme} locale={locale}>
      <AntdApp className="h-full" notification=>
        <App />
      </AntdApp>
    </ConfigProvider>
  </React.StrictMode>,
);

编写项目scss时也可直接/间接使用主题变量，实现样式统一

// variable.scss
$primaryColor: var(--ant-color-primary);

@use "@/assets/styles/variable.scss" as *;

.add-task-item:hover {
  color: $primaryColor;
}
.add-task-item:hover {
  color: var(--ant-color-primary);
}

组件

App

全局提供 React context 的 message、Modal、notification 静态方法，支持全局配置

import App from "./App.tsx";
import { App as AntdApp } from "antd";
import "virtual:windi.css";
import { ConfigProvider } from "antd";

const container = document.getElementById("root") as HTMLDivElement;

ReactDOM.createRoot(container).render(
  <React.StrictMode>
    <ConfigProvider theme= locale={locale}>
      <AntdApp className="h-full" notification=>
        <App />
      </AntdApp>
    </ConfigProvider>
  </React.StrictMode>,
);

应用内使用：

export default function Home() {
  const { message, notification } = App.useApp(); 
  notification.success({
     placement: "bottomLeft",
     message: "1个任务已完成",
     style: { width: "240px" },
  });
}

Form

useForm

通过 useForm hook，访问/操作表单状态

const [form] = Form.useForm();

return (
  <Form form={form}>
    ...
  </Form>
)

form.getFieldsValue()：获取表单字段值

form.resetFields()：重置表单字段值为 initialValues

Select

自定义option.label

function ColorLabel(props: { name: string; color: string }) {
  return (
    <div className="flex items-center">
      <div className="icon-circle mr-12px" style=></div>
      {props.name}
    </div>
  );
}

<Select
  className={styles["select-color-label"]}
  options={PROJECT_COLOR.map((item) => ({
    className: styles["select-color-label"],
    label: <ColorLabel name={item.name} color={item.color} />,
    value: item.color,
  }))}
></Select>

AntDesign React

基于 Ant Design 设计体系的 React UI 组件库，适合企业级中后台产品与前台桌面网站。