UNPKG

@core-rc/cssinjs-utils

Version:

A cssinjs util library to support @core-rc and its ecosystem libraries.

46 lines (40 loc) • 8.35 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
"use strict";(self.webpackChunk_core_rc_cssinjs_utils=self.webpackChunk_core_rc_cssinjs_utils||[]).push([[904],{30729:function(t,a,e){e.r(a),e.d(a,{demos:function(){return d}});var o=e(67294),n=e(859),d={}},11171:function(t,a,e){e.r(a),e.d(a,{demos:function(){return d}});var o=e(67294),n=e(68537),d={}},88541:function(t,a,e){e.r(a),e.d(a,{texts:function(){return n}});var o=e(859);const n=[{value:"genStyleUtils",paraId:0},{value:"genStyleUtils",paraId:1,tocIndex:0},{value:" \u63D0\u4F9B\u4E86\u7528\u4E8E\u5728 ",paraId:1,tocIndex:0},{value:"antd",paraId:1,tocIndex:0},{value:" \u751F\u6001\u5F00\u53D1\u4E2D\uFF0C\u751F\u6210\u548C\u7BA1\u7406\u6837\u5F0F\u7684\u5B9E\u7528\u5DE5\u5177\u51FD\u6570\u96C6\u3002",paraId:1,tocIndex:0},{value:"genStyleUtils<CompTokenMap, AliasToken, DesignToken>(config)",paraId:0},{value:"config",paraId:2,tocIndex:2},{value:`: \u53EF\u9009\uFF0C\u914D\u7F6E `,paraId:2,tocIndex:2},{value:"useCSP",paraId:3,tocIndex:2},{value:": \u4F7F\u7528 CSP \u7684\u94A9\u5B50\u51FD\u6570, \u7528\u4E8E\u5728\u4E0D\u9700\u8981\u989D\u5916\u914D\u7F6E\u7684\u60C5\u51B5\u4E0B\u81EA\u52A8\u5904\u7406 CSP \u89C4\u5219",paraId:3,tocIndex:2},{value:"usePrefix",paraId:3,tocIndex:2},{value:": \u4F7F\u7528\u6837\u5F0F\u524D\u7F00\u7684\u94A9\u5B50\u51FD\u6570, \u7528\u4E8E\u5728\u6240\u6709\u7EC4\u4EF6\u4E2D\u7EDF\u4E00\u7BA1\u7406\u548C\u5E94\u7528\u6837\u5F0F\u524D\u7F00",paraId:3,tocIndex:2},{value:"useToken",paraId:3,tocIndex:2},{value:": \u4F7F\u7528 token \u7684\u94A9\u5B50\u51FD\u6570, \u5E2E\u52A9\u5728\u6837\u5F0F\u751F\u6210\u65F6\u52A8\u6001\u5E94\u7528 token",paraId:3,tocIndex:2},{value:"getResetStyles",paraId:3,tocIndex:2},{value:": \u83B7\u53D6\u91CD\u7F6E\u6837\u5F0F\u51FD\u6570, \u7528\u4E8E\u5168\u5C40\u6837\u5F0F\u91CD\u7F6E",paraId:3,tocIndex:2},{value:"getCommonStyle",paraId:3,tocIndex:2},{value:": \u83B7\u53D6\u901A\u7528\u6837\u5F0F\u51FD\u6570, \u9002\u7528\u4E8E\u5E38\u89C1\u7EC4\u4EF6\u7684\u9ED8\u8BA4\u6837\u5F0F",paraId:3,tocIndex:2},{value:"getCompUnitless",paraId:3,tocIndex:2},{value:": \u83B7\u53D6\u7EC4\u4EF6\u65E0\u5355\u4F4D\u6837\u5F0F\u51FD\u6570, \u751F\u6210\u65E0\u9700\u5355\u4F4D\u7684\u6570\u503C\u578B\u6837\u5F0F",paraId:3,tocIndex:2},{value:"CompTokenMap",paraId:2,tocIndex:2},{value:": \u8303\u578B\u53C2\u6570\uFF0C\u8868\u793A\u7EC4\u4EF6 token \u6620\u5C04",paraId:2,tocIndex:2},{value:"AliasToken",paraId:2,tocIndex:2},{value:": \u8303\u578B\u53C2\u6570\uFF0C\u8868\u793A\u522B\u540D token",paraId:2,tocIndex:2},{value:"DesignToken",paraId:2,tocIndex:2},{value:": \u8303\u578B\u53C2\u6570\uFF0C\u8868\u793A\u8BBE\u8BA1 token",paraId:2,tocIndex:2},{value:"\u4F7F\u7528\u5EFA\u8BAE\uFF1A\u4E3A\u4E86\u66F4\u597D\u7684\u83B7\u5F97 TS \u7C7B\u578B\u652F\u6301\uFF0C\u5EFA\u8BAE\u60A8\u5728\u4F7F\u7528 ",paraId:4,tocIndex:2},{value:"genStyleUtils",paraId:4,tocIndex:2},{value:" \u7684\u65F6\u5019\u4F20\u5165\u8303\u578B\u53C2\u6570 ",paraId:4,tocIndex:2},{value:"CompTokenMap",paraId:4,tocIndex:2},{value:" ",paraId:4,tocIndex:2},{value:"DesignToken",paraId:4,tocIndex:2},{value:" ",paraId:4,tocIndex:2},{value:"AliasToken",paraId:4,tocIndex:2},{value:`import React from 'react'; import { genStyleUtils } from '@ant-design/cssinjs-utils'; // Step1: \u5B9A\u4E49\u7EC4\u4EF6 Token \u6620\u5C04 interface YourCompTokenMap { Button?: {}; Avatar?: {}; // ... } // Step2: \u5B9A\u4E49\u8BBE\u8BA1 Token interface YourDesignToken { color?: string; } // Step3: \u5B9A\u4E49\u522B\u540D Token interface YourAliasToken { colorFillContentHover?: string; } // Step4: \u4F7F\u7528 \`genStyleUtils\` \u751F\u6210\u5DE5\u5177\u51FD\u6570\u96C6 const { genStyleHooks, genComponentStyleHook, genSubStyleComponent, } = genStyleUtils<YourCompTokenMap, YourDesignToken, YourAliasToken>({ useCSP: () => { // ... }, usePrefix: () => { // ... }, useToken: () => { // ... }, }); `,paraId:5,tocIndex:3},{value:"genStyleHooks(component, styleFn, getDefaultToken?, options?)",paraId:0},{value:"component",paraId:6,tocIndex:5},{value:": \u7EC4\u4EF6\u540D\u79F0 ",paraId:6,tocIndex:5},{value:"ComponentName",paraId:6,tocIndex:5},{value:" \u6216\u7EC4\u4EF6\u540D\u79F0\u6570\u7EC4 ",paraId:6,tocIndex:5},{value:"[ComponentName, ComponentName]",paraId:6,tocIndex:5},{value:"\u3002",paraId:6,tocIndex:5},{value:"styleFn",paraId:6,tocIndex:5},{value:": \u6839\u636E\u6807\u8BB0\u548C\u6837\u5F0F\u4FE1\u606F\u751F\u6210 CSS \u63D2\u503C\u7684\u51FD\u6570\u3002",paraId:6,tocIndex:5},{value:"getDefaultToken",paraId:6,tocIndex:5},{value:": \u53EF\u9009\uFF0C\u7528\u4E8E\u68C0\u7D22\u9ED8\u8BA4\u6807\u8BB0\u7684\u51FD\u6570\u6216\u503C\u3002",paraId:6,tocIndex:5},{value:"options",paraId:6,tocIndex:5},{value:": \u53EF\u9009\uFF0C\u5305\u542B\u989D\u5916\u7684\u914D\u7F6E\u9009\u9879\u5982 ",paraId:6,tocIndex:5},{value:"resetStyle",paraId:6,tocIndex:5},{value:"\u3001",paraId:6,tocIndex:5},{value:"resetFont",paraId:6,tocIndex:5},{value:"\u3001",paraId:6,tocIndex:5},{value:"deprecatedTokens",paraId:6,tocIndex:5},{value:"\u3001",paraId:6,tocIndex:5},{value:"clientOnly",paraId:6,tocIndex:5},{value:" \u7B49\u3002",paraId:6,tocIndex:5},{value:"genComponentStyleHook(component, styleFn, getDefaultToken?, options?)",paraId:0},{value:"component",paraId:7,tocIndex:6},{value:": \u7EC4\u4EF6\u540D\u79F0 ",paraId:7,tocIndex:6},{value:"ComponentName",paraId:7,tocIndex:6},{value:" \u6216\u7EC4\u4EF6\u540D\u79F0\u6570\u7EC4 ",paraId:7,tocIndex:6},{value:"[ComponentName, ComponentName]",paraId:7,tocIndex:6},{value:"\u3002",paraId:7,tocIndex:6},{value:"styleFn",paraId:7,tocIndex:6},{value:": \u6839\u636E\u6807\u8BB0\u548C\u6837\u5F0F\u4FE1\u606F\u751F\u6210 CSS \u63D2\u503C\u7684\u51FD\u6570\u3002",paraId:7,tocIndex:6},{value:"getDefaultToken",paraId:7,tocIndex:6},{value:": \u53EF\u9009\uFF0C\u7528\u4E8E\u68C0\u7D22\u9ED8\u8BA4\u6807\u8BB0\u7684\u51FD\u6570\u6216\u503C\u3002",paraId:7,tocIndex:6},{value:"options",paraId:7,tocIndex:6},{value:": \u53EF\u9009\uFF0C\u5305\u542B\u989D\u5916\u7684\u914D\u7F6E\u9009\u9879\u5982 ",paraId:7,tocIndex:6},{value:"resetStyle",paraId:7,tocIndex:6},{value:"\u3001",paraId:7,tocIndex:6},{value:"resetFont",paraId:7,tocIndex:6},{value:"\u3001",paraId:7,tocIndex:6},{value:"deprecatedTokens",paraId:7,tocIndex:6},{value:"\u3001",paraId:7,tocIndex:6},{value:"clientOnly",paraId:7,tocIndex:6},{value:" \u7B49\u3002",paraId:7,tocIndex:6},{value:"genSubStyleComponent(component, styleFn, getDefaultToken?, options?)",paraId:0},{value:"component",paraId:8,tocIndex:7},{value:": \u7EC4\u4EF6\u540D\u79F0 ",paraId:8,tocIndex:7},{value:"ComponentName",paraId:8,tocIndex:7},{value:" \u6216\u7EC4\u4EF6\u540D\u79F0\u6570\u7EC4 ",paraId:8,tocIndex:7},{value:"[ComponentName, ComponentName]",paraId:8,tocIndex:7},{value:"\u3002",paraId:8,tocIndex:7},{value:"styleFn",paraId:8,tocIndex:7},{value:": \u6839\u636E\u6807\u8BB0\u548C\u6837\u5F0F\u4FE1\u606F\u751F\u6210 CSS \u63D2\u503C\u7684\u51FD\u6570\u3002",paraId:8,tocIndex:7},{value:"getDefaultToken",paraId:8,tocIndex:7},{value:": \u53EF\u9009\uFF0C\u7528\u4E8E\u68C0\u7D22\u9ED8\u8BA4\u6807\u8BB0\u7684\u51FD\u6570\u6216\u503C\u3002",paraId:8,tocIndex:7},{value:"options",paraId:8,tocIndex:7},{value:": \u53EF\u9009\uFF0C\u5305\u542B\u989D\u5916\u7684\u914D\u7F6E\u9009\u9879\u5982 ",paraId:8,tocIndex:7},{value:"resetStyle",paraId:8,tocIndex:7},{value:"\u3001",paraId:8,tocIndex:7},{value:"resetFont",paraId:8,tocIndex:7},{value:"\u3001",paraId:8,tocIndex:7},{value:"deprecatedTokens",paraId:8,tocIndex:7},{value:"\u3001",paraId:8,tocIndex:7},{value:"clientOnly",paraId:8,tocIndex:7},{value:" \u7B49\u3002",paraId:8,tocIndex:7},{value:"genStyleHooks",paraId:0},{value:`const useStyle = genStyleHooks('Button', styleFn, getDefaultToken, { resetStyle: true }); const [wrapStyle, hashId] = useStyle('button'); `,paraId:9,tocIndex:9},{value:"genComponentStyleHook",paraId:0},{value:`const useStyle = genComponentStyleHook('Button', styleFn, getDefaultToken, { clientOnly: true }); const [wrapStyle, hashId] = useStyle('button'); `,paraId:10,tocIndex:10},{value:"genSubStyleComponent",paraId:0},{value:`const SubButtonStyle = genSubStyleComponent('Button', styleFn, getDefaultToken, { resetFont: true }); () => <SubButtonStyle prefixCls="sub-button" />; `,paraId:11,tocIndex:11}]},51446:function(t,a,e){e.r(a),e.d(a,{texts:function(){return n}});var o=e(68537);const n=[]}}]);