mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-05 15:39:45 +08:00
Code Issues Actions 19 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 canUseDom from 'rc-util/lib/Dom/canUseDom';
import ConfigProvider from '..'; import ConfigProvider from '..';
import { InputNumber, Button } from '../..'; import { InputNumber, Button, Select } from '../..';
import { render } from '../../../tests/utils'; import { render } from '../../../tests/utils';
import { resetWarned } from '../../_util/warning'; import { resetWarned } from '../../_util/warning';
import theme from '../../theme'; import theme from '../../theme';
@ -252,19 +252,18 @@ describe('ConfigProvider.Theme', () => {
theme={{ theme={{
cssVar: { key: 'foo' }, cssVar: { key: 'foo' },
hashed: true, hashed: true,
components: { Button: { colorPrimary: '#1890ff', defaultBg: '#000' } }, components: { Select: { colorPrimary: '#1890ff', optionSelectedColor: '#000' } },
}} }}
> >
<Button className="button-foo" type="primary"> <Select className="select-foo" />
Button
</Button>
</ConfigProvider>, </ConfigProvider>,
); );
const btn = container.querySelector('.button-foo')!; const select = container.querySelector('.select-foo')!;
expect(btn).toHaveStyle({ expect(select).toHaveStyle({
'--antd-color-primary': '#1890ff', '--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, { export default genCSSVarRegister('Select', prepareComponentToken, {
unitless: { unitless: {
optionLineHeight: true, 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 CSSVarRegister: FC<CSSVarRegisterProps> = ({ rootCls, cssVar }) => {
const [, realToken] = useToken(); const [, realToken] = useToken();
useCSSVarRegister( useCSSVarRegister(
@ -307,7 +317,7 @@ export const genCSSVarRegister = <C extends OverrideComponent>(
key: cssVar?.key!, key: cssVar?.key!,
unitless: { unitless: {
...unitless, ...unitless,
...options?.unitless, ...compUnitless,
zIndexPopup: true, zIndexPopup: true,
}, },
ignore, ignore,
@ -318,8 +328,7 @@ export const genCSSVarRegister = <C extends OverrideComponent>(
const defaultToken = getDefaultComponentToken(component, realToken, getDefaultToken); const defaultToken = getDefaultComponentToken(component, realToken, getDefaultToken);
const componentToken = getComponentToken(component, realToken, defaultToken); const componentToken = getComponentToken(component, realToken, defaultToken);
Object.keys(defaultToken).forEach((key) => { Object.keys(defaultToken).forEach((key) => {
componentToken[`${component}${key.slice(0, 1).toUpperCase()}${key.slice(1)}`] = componentToken[prefixToken(key)] = componentToken[key];
componentToken[key];
delete componentToken[key]; delete componentToken[key];
}); });
return componentToken; return componentToken;