From 4f9c8e2af2b7633467dd5929d69b707e94966089 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 23 May 2023 13:39:05 +0800 Subject: [PATCH] fix: global token in Component Token override should be respected (#42535) * fix: global token in Component Token override should be respected * test: add snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 90 +++++++++++++------ .../__tests__/__snapshots__/demo.test.ts.snap | 90 +++++++++++++------ components/message/demo/component-token.tsx | 37 +++++--- .../theme/util/genComponentStyleHook.ts | 14 ++- 4 files changed, 162 insertions(+), 69 deletions(-) diff --git a/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap index 9531a5c88f..d79fb69c63 100644 --- a/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1,40 +1,76 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders components/message/demo/component-token.tsx extend context correctly 1`] = ` -
+Array [
- - - - - Hello World! - + + + + Hello World! + +
-
- + , +
+
+
+ + + + + Hello World! + +
+
+
, +] `; exports[`renders components/message/demo/custom-style.tsx extend context correctly 1`] = ` diff --git a/components/message/__tests__/__snapshots__/demo.test.ts.snap b/components/message/__tests__/__snapshots__/demo.test.ts.snap index af0b392f4f..057a16a598 100644 --- a/components/message/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/message/__tests__/__snapshots__/demo.test.ts.snap @@ -1,40 +1,76 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders components/message/demo/component-token.tsx correctly 1`] = ` -
+Array [
- - - - - Hello World! - + + + + Hello World! + +
-
- + , +
+
+
+ + + + + Hello World! + +
+
+
, +] `; exports[`renders components/message/demo/custom-style.tsx correctly 1`] = ` diff --git a/components/message/demo/component-token.tsx b/components/message/demo/component-token.tsx index 708539dfb2..9c6f85a698 100644 --- a/components/message/demo/component-token.tsx +++ b/components/message/demo/component-token.tsx @@ -1,20 +1,33 @@ -import React from 'react'; import { ConfigProvider, message } from 'antd'; +import React from 'react'; /** Test usage. Do not use in your production. */ const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = message; export default () => ( - + + + + - - + }} + > + + + ); diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts index e3f2666297..aa6ab85de8 100644 --- a/components/theme/util/genComponentStyleHook.ts +++ b/components/theme/util/genComponentStyleHook.ts @@ -4,7 +4,7 @@ import { useStyleRegister } from '@ant-design/cssinjs'; import { useContext } from 'react'; import { ConfigContext } from '../../config-provider/context'; import { genCommonStyle, genLinkStyle } from '../../style'; -import type { ComponentTokenMap, GlobalToken } from '../interface'; +import type { ComponentTokenMap, GlobalToken, OverrideToken } from '../interface'; import type { UseComponentStyleResult } from '../internal'; import { mergeToken, statisticToken, useToken } from '../internal'; @@ -13,6 +13,11 @@ export type OverrideComponent = keyof OverrideTokenWithoutDerivative; export type GlobalTokenWithComponent = GlobalToken & ComponentTokenMap[ComponentName]; +type ComponentToken = Exclude< + OverrideToken[ComponentName], + undefined +>; + export interface StyleInfo { hashId: string; prefixCls: string; @@ -70,9 +75,12 @@ export default function genComponentStyleHook { const { token: proxyToken, flush } = statisticToken(token); + const customComponentToken = token[component] as ComponentToken; const defaultComponentToken = - typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken; - const mergedComponentToken = { ...defaultComponentToken, ...token[component] }; + typeof getDefaultToken === 'function' + ? getDefaultToken(mergeToken(proxyToken, customComponentToken ?? {})) + : getDefaultToken; + const mergedComponentToken = { ...defaultComponentToken, ...customComponentToken }; const componentCls = `.${prefixCls}`; const mergedToken = mergeToken<