Skip to content

Commit 3e05d63

Browse files
committed
doc: update stylex.md
1 parent 658abb0 commit 3e05d63

File tree

1 file changed

+59
-2
lines changed

1 file changed

+59
-2
lines changed

docs/stylex.md

Lines changed: 59 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -925,7 +925,7 @@ const styles = stylex.create({
925925
TypeScript 类型
926926
---
927927
928-
### 样式 props 类型
928+
### StyleXStyles 样式 props 类型
929929
930930
```ts
931931
import type {StyleXStyles} from '@stylexjs/stylex';
@@ -953,7 +953,7 @@ function MyComponent(
953953
```
954954
<!--rehype:className=wrap-text-->
955955
956-
### 禁止属性
956+
### StyleXStylesWithout 禁止属性
957957
<!--rehype:wrap-class=col-span-2 row-span-3-->
958958
959959
```ts
@@ -1044,3 +1044,60 @@ type Props = {
10441044
};
10451045
```
10461046
<!--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

Comments
 (0)