@@ -925,7 +925,7 @@ const styles = stylex.create({
925
925
TypeScript 类型
926
926
---
927
927
928
- ### 样式 props 类型
928
+ ### StyleXStyles 样式 props 类型
929
929
930
930
` ` ` ts
931
931
import type {StyleXStyles } from ' @stylexjs/stylex' ;
@@ -953,7 +953,7 @@ function MyComponent(
953
953
` ` `
954
954
<!--rehype:className=wrap-text-->
955
955
956
- ### 禁止属性
956
+ ### StyleXStylesWithout 禁止属性
957
957
<!--rehype:wrap-class=col-span-2 row-span-3-->
958
958
959
959
` ` ` ts
@@ -1044,3 +1044,60 @@ type Props = {
1044
1044
};
1045
1045
` ` `
1046
1046
<!--rehype:className=wrap-text-->
1047
+
1048
+ ### VarGroup
1049
+
1050
+ ` ` ` ts
1051
+ import * as stylex from ' @stylexjs/stylex' ;
1052
+
1053
+ export const vars = stylex .defineVars ({
1054
+ color: ' red' ,
1055
+ backgroundColor: ' blue' ,
1056
+ });
1057
+
1058
+ export type Vars = typeof vars ;
1059
+ /*
1060
+ Vars = VarGroup<{
1061
+ color: string,
1062
+ backgroundColor: string,
1063
+ }>
1064
+ */
1065
+ ` ` `
1066
+
1067
+ VarGroup 是调用 ` stylex .defineVars ` 生成的对象的类型。它将键映射到 CSS 自定义属性的引用
1068
+
1069
+ ### StaticStyles
1070
+
1071
+ ` ` ` ts
1072
+ import type {StaticStyles } from ' @stylexjs/stylex' ;
1073
+
1074
+ type Props = {
1075
+ // ...
1076
+ style?: StaticStyles< {
1077
+ color?: ' red' | ' blue' | ' green' ;
1078
+ padding?: 0 | 4 | 8 | 16 | 32 ;
1079
+ backgroundColor?: string;
1080
+ borderColor?: string;
1081
+ borderTopColor?: string;
1082
+ borderEndColor?: string;
1083
+ borderBottomColor?: string;
1084
+ borderStartColor?: string;
1085
+ }> ;
1086
+ };
1087
+ ` ` `
1088
+
1089
+ 不允许使用函数定义的动态样式
1090
+
1091
+ ### Theme
1092
+
1093
+ ` ` ` ts
1094
+ import type {VarGroup } from ' @stylexjs/stylex' ;
1095
+ import * as stylex from ' @stylexjs/stylex' ;
1096
+
1097
+ import {vars } from ' ./vars.stylex' ;
1098
+
1099
+ export const theme: Theme <typeof vars > = stylex .createTheme (vars, {
1100
+ color: ' red' , // OK
1101
+ backgroundColor: ' blue' , // OK
1102
+ });
1103
+ ` ` `
0 commit comments