安装antd
现在从 yarn 或 npm 或 pnpm 安装并引入 antd。
javascript
yarn add antd
修改 src/App.js,引入 antd 的按钮组件。
javascript
import React from 'react';
import { Button } from 'antd';
const App: React.FC = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
export default App;
javascript
import React from "react";
import ReactDOM from "react-dom/client";
import reportWebVitals from "./reportWebVitals";
import {
StyleProvider,
legacyLogicalPropertiesTransformer,
} from "@ant-design/cssinjs"; //还可以进行rem配置px2remTransformer,具体查看antd文档
import { ConfigProvider } from 'antd';
import zhCN from "antd/locale/zh_CN";
// for date-picker i18n
import "dayjs/locale/zh-cn";
import App from "./App";
import "./index.css";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
//ConfigProvider 全局配置 locale国际化-中文 prefixCls设置统一样式前缀 theme设置主题(colorPrimary-- Primary btn 按钮颜色)
<ConfigProvider
locale={zhCN}
prefixCls="xx"
theme={{
//全局
token: { colorPrimary: "#00b96b" },
//组件
components: {
Button: { borderColorDisabled: "red" },
},
// 1. 单独使用暗色算法
algorithm: theme.darkAlgorithm,
// cssVar: true,
}}
>
//样式兼容--如果你需要兼容旧版浏览器,请根据实际需求使用 StyleProvider 降级处理。
// `hashPriority` 默认为 `low`,配置为 `high` 后,
// 会移除 `:where` 选择器封装
// `transformers` 提供预处理功能将样式进行转换
//
<StyleProvider
hashPriority="high"
transformers={[legacyLogicalPropertiesTransformer]}
>
<React.StrictMode>
<App />
</React.StrictMode>
</StyleProvider>
</ConfigProvider>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
定制主题:
全局变量(token
):
局部-(组件token):
CSS变量
在 ConfigProvider
的 theme 属性中,通过 cssVar 配置来开启 CSS 变量模式。这个配置会被继承,所以希望全局开启 CSS 变量模式的话,只需要在根节点的 ConfigProvider 中配置即可。