mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-07-24 15:38:45 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

fix: genCSSVarRegister unitless should work (#45885)

Browse Source 
* fix: genCSSVarRegister unitless should work

* chore: update
This commit is contained in:
MadCcc 2023-11-15 11:26:35 +08:00 committed by GitHub
parent 8e32367fd5
commit 67a3f1e9d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import kebabCase from 'lodash/kebabCase';
import canUseDom from 'rc-util/lib/Dom/canUseDom';
import ConfigProvider from '..';
import { InputNumber, Button } from '../..';
import { InputNumber, Button, Select } from '../..';
import { render } from '../../../tests/utils';
import { resetWarned } from '../../_util/warning';
import theme from '../../theme';
@ -252,19 +252,18 @@ describe('ConfigProvider.Theme', () => {
theme={{
cssVar: { key: 'foo' },
hashed: true,
components: { Button: { colorPrimary: '#1890ff', defaultBg: '#000' } },
components: { Select: { colorPrimary: '#1890ff', optionSelectedColor: '#000' } },
}}
>
<Button className="button-foo" type="primary">
Button
</Button>
<Select className="select-foo" />
</ConfigProvider>,
);
const btn = container.querySelector('.button-foo')!;
expect(btn).toHaveStyle({
const select = container.querySelector('.select-foo')!;
expect(select).toHaveStyle({
'--antd-color-primary': '#1890ff',
'--antd-button-default-bg': '#000',
'--antd-select-option-selected-color': '#000',
'--antd-select-option-selected-font-weight': '600',
});
});
});

1
components/select/style/cssVar.ts
View File

@ -4,5 +4,6 @@ import { prepareComponentToken } from '.';
export default genCSSVarRegister('Select', prepareComponentToken, {
unitless: {
optionLineHeight: true,
optionSelectedFontWeight: true,
},
});

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

@ -298,6 +298,16 @@ export const genCSSVarRegister = <C extends OverrideComponent>(
};
},
) => {
function prefixToken(key: string) {
return `${component}${key.slice(0, 1).toUpperCase()}${key.slice(1)}`;
}
const { unitless: originUnitless = {} } = options ?? {};
const compUnitless: any = {};
Object.keys(originUnitless).forEach((key: keyof ComponentTokenKey<C>) => {
compUnitless[prefixToken(key)] = originUnitless[key];
});
const CSSVarRegister: FC<CSSVarRegisterProps> = ({ rootCls, cssVar }) => {
const [, realToken] = useToken();
useCSSVarRegister(
@ -307,7 +317,7 @@ export const genCSSVarRegister = <C extends OverrideComponent>(
key: cssVar?.key!,
unitless: {
...unitless,
...options?.unitless,
...compUnitless,
zIndexPopup: true,
},
ignore,
@ -318,8 +328,7 @@ export const genCSSVarRegister = <C extends OverrideComponent>(
const defaultToken = getDefaultComponentToken(component, realToken, getDefaultToken);
const componentToken = getComponentToken(component, realToken, defaultToken);
Object.keys(defaultToken).forEach((key) => {
componentToken[`${component}${key.slice(0, 1).toUpperCase()}${key.slice(1)}`] =
componentToken[key];
componentToken[prefixToken(key)] = componentToken[key];
delete componentToken[key];
});
return componentToken;