Skip to content

Commit 14e7faf

Browse files
committed
docs: update genStyleUtils use docs
1 parent 7daaf99 commit 14e7faf

File tree

1 file changed

+23
-27
lines changed

1 file changed

+23
-27
lines changed

docs/demos/genStyleUtils.md

+23-27
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,14 @@ nav:
1111
## 入参介绍
1212

1313
### `genStyleUtils<CompTokenMap>(getConfigProviderContext?, getThemeProviderContext?)`
14-
- `getConfigProviderContext`: 可选,用于获取配置上下文的钩子函数。
15-
- `getThemeProviderContext`: 可选,用于获取主题上下文的钩子函数。
14+
- `config`: 可选,配置
15+
- `useCSP`: 使用 CSP 的钩子函数
16+
- `usePrefix`: 使用样式前缀的钩子函数
17+
- `useToken`: 使用 token 的钩子函数
1618
- `CompTokenMap`: 范型参数,表示组件 token 映射
17-
> 使用建议:为了更好的获得 TS 类型支持,建议您在使用 `genStyleUtils` 的时候传入范型参数 `CompTokenMap`
19+
- `DesignTokenn`: 范型参数,表示设计 token
20+
- `AliasToken`: 范型参数,表示别名 token
21+
> 使用建议:为了更好的获得 TS 类型支持,建议您在使用 `genStyleUtils` 的时候传入范型参数 `CompTokenMap` `DesignTokenn` `AliasToken`
1822
1923
## 如何使用
2024
``` typescript
@@ -28,28 +32,30 @@ interface YourCompTokenMap {
2832
// ...
2933
}
3034

31-
// Step2: 定义配置上下文
32-
function getConfigProviderContext () {
33-
// ... do something
34-
return React.createContext({
35-
// ... your config context
36-
});
35+
interface YourDesignTokenn {
36+
color?: string;
3737
}
3838

39-
// Step3: 定义主题上下文
40-
function getThemeProviderContext () {
41-
// ...do something
42-
return React.createContext({
43-
// ... your theme context
44-
});
39+
interface YourAliasToken {
40+
colorFillContentHover?: string;
4541
}
42+
4643
// Step4: 使用 `genStyleUtils` 生成工具函数集
4744
const {
4845
genStyleHooks,
4946
genComponentStyleHook,
5047
genSubStyleComponent,
51-
useToken,
52-
} = genStyleUtils<YourCompTokenMap>(getConfigProviderContext, getThemeProviderContext);
48+
} = genStyleUtils<YourCompTokenMap, YourDesignTokenn, YourAliasToken>({
49+
useCSP: () => {
50+
// ...
51+
},
52+
usePrefix: () => {
53+
// ...
54+
},
55+
useToken: () => {
56+
// ...
57+
},
58+
});
5359
```
5460

5561
## 工具介绍
@@ -75,10 +81,6 @@ const {
7581
- `getDefaultToken`: 可选,用于检索默认标记的函数或值。
7682
- `options`: 可选,包含额外的配置选项如 `resetStyle``resetFont``deprecatedTokens``clientOnly` 等。
7783

78-
### `useToken()`
79-
80-
- 无参数。
81-
8284
## 示例用法
8385

8486
### `genStyleHooks`
@@ -102,9 +104,3 @@ const SubButtonStyle = genSubStyleComponent('Button', styleFn, getDefaultToken,
102104

103105
() => <SubButtonStyle prefixCls="sub-button" />;
104106
```
105-
106-
### `useToken`
107-
108-
```javascript
109-
const [theme, token, hashId, realToken, cssVar] = useToken();
110-
```

0 commit comments

Comments
 (0)