Skip to content

Commit

Permalink
docs: add genStyleUtils using docs.
Browse files Browse the repository at this point in the history
  • Loading branch information
YumoImer committed Jul 9, 2024
1 parent 9ba6462 commit 43a8ae9
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 2 deletions.
Empty file removed docs/demos/.gitkeep
Empty file.
62 changes: 62 additions & 0 deletions docs/demos/genStyleUtils.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
---
title: genStyleUtils
nav:
title: API
path: /genStyleUtils
---
### 介绍
`genStyleUtils` 是一个生成器,用于生成在 `antd` 生态下开发组件样式的工具集。它返回这些工具:
- `genComponentStyleHook`: 用于生成组件样式
- `genStyleHooks`: 用于生成组件样式集合
- `genSubStyleComponent`: 用于生成子组件样式
- `useToken`: 获取 token 的钩子函数

### 使用建议
为了更好的获得 TS 类型支持,建议您在使用 `genStyleUtils` 的时候传入范型参数 `CompTokenMap`,比如:
``` typescript
import { genStyleUtils } from '@ant-design/cssinjs-util';

interface YourCompTokenMap {
Button?: {};
};

genStyleUtils<YourCompTokenMap>();
```

### 基础使用
> 最简单的用法,适用于对上下文无扩展需要
``` typescript
import { genStyleUtils } from '@ant-design/cssinjs-util';

const utils = genStyleUtils<YourCompTokenMap>();

const {
genComponentStyleHook,
genStyleHooks,
genSubStyleComponent,
useToken
} = utils;
```

### 扩展上下文
> 使用 `genStyleUtils` 的时候传入 `getConfigProviderContext``getThemeProviderContext` 两个函数,用于扩展 `ConfigProvider``ThemeProvider` 的上下文。
``` typescript
import React from 'react';
import { genStyleUtils } from '@ant-design/cssinjs-util';

function getConfigProviderContext () {
// ... do something
return React.createContext({
// ... your config context
});
}

function getThemeProviderContext () {
// ...do something
return React.createContext({
// ... your theme context
});
}

const utils = genStyleUtils<YourCompTokenMap>(getConfigProviderContext, getThemeProviderContext);
```
Empty file removed docs/examples/.gitkeep
Empty file.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"start": "dumi dev",
"compile": "father build",
"prepublishOnly": "npm run compile && np --yolo --no-publish",
"lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
"lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
"test": "rc-test",
"coverage": "rc-test --coverage"
},
Expand Down
3 changes: 2 additions & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"allowSyntheticDefaultImports": true,
"paths": {
"@/*": ["src/*"],
"@@/*": [".dumi/tmp/*"]
"@@/*": [".dumi/tmp/*"],
"@ant-design/cssinjs-util": ["src/index.ts"]
}
}
}

0 comments on commit 43a8ae9

Please sign in to comment.