11
11
## 入参介绍
12
12
13
13
### ` genStyleUtils<CompTokenMap>(getConfigProviderContext?, getThemeProviderContext?) `
14
- - ` getConfigProviderContext ` : 可选,用于获取配置上下文的钩子函数。
15
- - ` getThemeProviderContext ` : 可选,用于获取主题上下文的钩子函数。
14
+ - ` config ` : 可选,配置
15
+ - ` useCSP ` : 使用 CSP 的钩子函数
16
+ - ` usePrefix ` : 使用样式前缀的钩子函数
17
+ - ` useToken ` : 使用 token 的钩子函数
16
18
- ` CompTokenMap ` : 范型参数,表示组件 token 映射
17
- > 使用建议:为了更好的获得 TS 类型支持,建议您在使用 ` genStyleUtils ` 的时候传入范型参数 ` CompTokenMap `
19
+ - ` DesignTokenn ` : 范型参数,表示设计 token
20
+ - ` AliasToken ` : 范型参数,表示别名 token
21
+ > 使用建议:为了更好的获得 TS 类型支持,建议您在使用 ` genStyleUtils ` 的时候传入范型参数 ` CompTokenMap ` ` DesignTokenn ` ` AliasToken `
18
22
19
23
## 如何使用
20
24
``` typescript
@@ -28,28 +32,30 @@ interface YourCompTokenMap {
28
32
// ...
29
33
}
30
34
31
- // Step2: 定义配置上下文
32
- function getConfigProviderContext () {
33
- // ... do something
34
- return React .createContext ({
35
- // ... your config context
36
- });
35
+ interface YourDesignTokenn {
36
+ color? : string ;
37
37
}
38
38
39
- // Step3: 定义主题上下文
40
- function getThemeProviderContext () {
41
- // ...do something
42
- return React .createContext ({
43
- // ... your theme context
44
- });
39
+ interface YourAliasToken {
40
+ colorFillContentHover? : string ;
45
41
}
42
+
46
43
// Step4: 使用 `genStyleUtils` 生成工具函数集
47
44
const {
48
45
genStyleHooks,
49
46
genComponentStyleHook,
50
47
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
+ });
53
59
```
54
60
55
61
## 工具介绍
@@ -75,10 +81,6 @@ const {
75
81
- ` getDefaultToken ` : 可选,用于检索默认标记的函数或值。
76
82
- ` options ` : 可选,包含额外的配置选项如 ` resetStyle ` 、` resetFont ` 、` deprecatedTokens ` 、` clientOnly ` 等。
77
83
78
- ### ` useToken() `
79
-
80
- - 无参数。
81
-
82
84
## 示例用法
83
85
84
86
### ` genStyleHooks `
@@ -102,9 +104,3 @@ const SubButtonStyle = genSubStyleComponent('Button', styleFn, getDefaultToken,
102
104
103
105
() => < SubButtonStyle prefixCls= " sub-button" / > ;
104
106
```
105
-
106
- ### ` useToken `
107
-
108
- ``` javascript
109
- const [theme , token , hashId , realToken , cssVar ] = useToken ();
110
- ```
0 commit comments