docs: add instruction for component token (#42838)

This commit is contained in:
MadCcc 2023-06-05 20:25:58 +08:00 committed by GitHub
parent a0d8fcb23a
commit 2710923800
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 58 additions and 0 deletions

View File

@ -7,6 +7,35 @@ This document contains the correspondence between all the less variables related
<Alert message="Note: There are still some less variables that do not have a corresponding Component Token, and these variables have been deprecated in version 5.x."></Alert>
## How to use Component Token
We could configure global token and component token for each component through the `theme` property of ConfigProvider.
```tsx
import { Checkbox, ConfigProvider, Radio } from 'antd';
import React from 'react';
const App: React.FC = () => (
<ConfigProvider
theme={{
components: {
Radio: {
colorPrimary: '#00b96b',
},
Checkbox: {
colorPrimary: '#ff4d4f',
},
},
}}
>
<Radio>Radio</Radio>
<Checkbox>Checkbox</Checkbox>
</ConfigProvider>
);
export default App;
```
<!-- ## 全局变量 -->
## Component Token

View File

@ -7,6 +7,35 @@ title: Less 变量迁移 Design Token
<Alert message="注意:仍有部分变量没有对应的 Component Token这些变量在 5.x 版本中已被废弃。"></Alert>
## 如何配置 Component Token
通过 ConfigProvider 的 `theme` 属性,我们可以对每一个组件单独配置全局 Token 和组件 Token
```tsx
import { Checkbox, ConfigProvider, Radio } from 'antd';
import React from 'react';
const App: React.FC = () => (
<ConfigProvider
theme={{
components: {
Radio: {
colorPrimary: '#00b96b',
},
Checkbox: {
colorPrimary: '#ff4d4f',
},
},
}}
>
<Radio>Radio</Radio>
<Checkbox>Checkbox</Checkbox>
</ConfigProvider>
);
export default App;
```
<!-- ## 全局变量 -->
## 组件变量