Feat: Add new API genStyleUtils.

[YumoImer]

这个变动的性质是

• 新特性提交
• 其他改动（日常 bugfix、文档、站点改进、分支合并等，不需要填写余下的模板）

需求背景

ant-design/ant-design#49748

实现方案和 API

genStyleUtils

genStyleUtils 提供了用于在 antd 生态开发中，生成和管理样式的实用工具函数集。

入参介绍

genStyleUtils<CompTokenMap>(getConfigProviderContext?, getThemeProviderContext?)

• config: 可选，配置
  • useCSP: 使用 CSP 的钩子函数
  • usePrefix: 使用样式前缀的钩子函数
  • useToken: 使用 token 的钩子函数
• CompTokenMap: 范型参数，表示组件 token 映射
• DesignTokenn: 范型参数，表示设计 token
• AliasToken: 范型参数，表示别名 token

使用建议：为了更好的获得 TS 类型支持，建议您在使用 genStyleUtils 的时候传入范型参数 CompTokenMap DesignTokenn AliasToken

如何使用

import React from 'react';
import { genStyleUtils } from '@ant-design/cssinjs-utils';

// Step1: 定义组件 Token 映射
interface YourCompTokenMap {
  Button?: {};
  Avatar?: {};
  // ...
}

interface YourDesignTokenn {
  color?: string;
}

interface YourAliasToken {
  colorFillContentHover?: string;
}

// Step2: 使用 `genStyleUtils` 生成工具函数集
const {
  genStyleHooks,
  genComponentStyleHook,
  genSubStyleComponent,
} = genStyleUtils<YourCompTokenMap, YourDesignTokenn, YourAliasToken>({
  useCSP: () => {
    // ...
  },
  usePrefix: () => {
    // ...
  },
  useToken: () => {
    // ...
  },
});

工具介绍

genStyleHooks(component, styleFn, getDefaultToken?, options?)

• component: 组件名称 ComponentName 或组件名称数组 [ComponentName, ComponentName]。
• styleFn: 根据标记和样式信息生成 CSS 插值的函数。
• getDefaultToken: 可选，用于检索默认标记的函数或值。
• options: 可选，包含额外的配置选项如 resetStyle、resetFont、deprecatedTokens、clientOnly 等。

genComponentStyleHook(component, styleFn, getDefaultToken?, options?)

• component: 组件名称 ComponentName 或组件名称数组 [ComponentName, ComponentName]。
• styleFn: 根据标记和样式信息生成 CSS 插值的函数。
• getDefaultToken: 可选，用于检索默认标记的函数或值。
• options: 可选，包含额外的配置选项如 resetStyle、resetFont、deprecatedTokens、clientOnly 等。

genSubStyleComponent(component, styleFn, getDefaultToken?, options?)

• component: 组件名称 ComponentName 或组件名称数组 [ComponentName, ComponentName]。
• styleFn: 根据标记和样式信息生成 CSS 插值的函数。
• getDefaultToken: 可选，用于检索默认标记的函数或值。
• options: 可选，包含额外的配置选项如 resetStyle、resetFont、deprecatedTokens、clientOnly 等。

示例用法

genStyleHooks

const useStyle = genStyleHooks('Button', styleFn, getDefaultToken, { resetStyle: true });
const [wrapStyle, hashId] = useStyle('button');

genComponentStyleHook

const useStyle = genComponentStyleHook('Button', styleFn, getDefaultToken, { clientOnly: true });
const [wrapStyle, hashId] = useStyle('button');

genSubStyleComponent

const SubButtonStyle = genSubStyleComponent('Button', styleFn, getDefaultToken, { resetFont: true });

() => <SubButtonStyle prefixCls="sub-button" />;

对用户的影响和可能的风险

请求合并前的自查清单

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• [] Changelog 已提供或无须提供

后续计划

• 补充文档
• [] 补充 Changelog
• [] 补充单測
• [] 完善 RFC

[zombieJ]

非实体加个 type 去除副作用~

[YumoImer]

Fixed.

[zombieJ]

CI failed