mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix: global token in components with css var should work (#45860)

Browse Source
This commit is contained in:
MadCcc 2023-11-14 11:59:14 +08:00 committed by GitHub
parent 625184a306
commit b2300fa2d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/config-provider/__tests__/theme.test.tsx
View File

@ -245,5 +245,27 @@ describe('ConfigProvider.Theme', () => {
'line-height': 'var(--bar-line-height)',
});
});
it('component token should work', () => {
const { container } = render(
<ConfigProvider
theme={{
cssVar: { key: 'foo' },
hashed: true,
components: { Button: { colorPrimary: '#1890ff', defaultBg: '#000' } },
}}
>
<Button className="button-foo" type="primary">
Button
</Button>
</ConfigProvider>,
);
const btn = container.querySelector('.button-foo')!;
expect(btn).toHaveStyle({
'--antd-color-primary': '#1890ff',
'--antd-button-default-bg': '#000',
});
});
});
});

10
components/theme/util/genComponentStyleHook.tsx
View File

@ -303,7 +303,7 @@ export const genCSSVarRegister = <C extends OverrideComponent>(
useCSSVarRegister(
{
path: [component],
prefix: getCompVarPrefix(component, cssVar.prefix),
prefix: cssVar.prefix,
key: cssVar?.key!,
unitless: {
...unitless,
@ -316,7 +316,13 @@ export const genCSSVarRegister = <C extends OverrideComponent>(
},
() => {
const defaultToken = getDefaultComponentToken(component, realToken, getDefaultToken);
return getComponentToken(component, realToken, defaultToken);
const componentToken = getComponentToken(component, realToken, defaultToken);
Object.keys(defaultToken).forEach((key) => {
componentToken[`${component}${key.slice(0, 1).toUpperCase()}${key.slice(1)}`] =
componentToken[key];
delete componentToken[key];
});
return componentToken;
},
);
return null;