4.0 ConfigProvider Theme 的问题

[Hbllol]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

对于compuments 的自定义，是怎么使其生效。

What does the proposed API look like?

n

[pipinet]

同样遇到compuments的样式配置不生效。

[Hbllol]

export const THEME: ThemeConfig = {
  hashed: true,
  token: {
    fontFamily: join(commonVars.fontFamilies.sans, ','),
    colorPrimary: commonVars.primaryColor,
    borderRadius: 4,
    fontSize: 14,
    wireframe: false,
  },
  components: {
    Modal: {
      //不生效
      modalCloseBtnSize: 24,
    },
    Table: {
      //不生效
      tableSelectedRowBg: '#dcf4ff',
    },
    Button: {
      //不生效
      buttonPaddingHorizontal: 100,
    },
  },
};

<template>
  <a-config-provider
    :locale="zhCN"
    compoment-size="middle"
    :virtual="true"
    :theme="THEME"
  >
    <slot></slot>
  </a-config-provider>
</template>

[Hbllol]

@aibayanyu20

[pipinet]

@aibayanyu20 我们也尝试着升级了一下，好像确实不生效。

[aibayanyu20]

好的，等我看看这个问题，

[pipinet]

@aibayanyu20 非常感谢，辛苦啦。

[zhylmzr]

我发现如果想使用 provider 来自定义组件样式，能够用到的token大部分都只能是 AliasToken。

以Button为例，它的组件Token定义是这样的:

ant-design-vue/components/button/style/index.ts

Lines 9 to 10 in 3c5fb84

	/** Component only token. Which will handle additional calculation of alias token */
	export interface ComponentToken {}

而 buttonPaddingHorizontal 是内部使用的token，并不会从ComponentToken读取:

ant-design-vue/components/button/style/index.ts

Lines 12 to 16 in 3c5fb84

	export interface ButtonToken extends FullToken<'Button'> {
	// FIXME: should be removed
	colorOutlineDefault: string;
	buttonPaddingHorizontal: number;
	}

ant-design-vue/components/button/style/index.ts

Lines 499 to 502 in 3c5fb84

	const buttonToken = mergeToken<ButtonToken>(token, {
	colorOutlineDefault: controlTmpOutline,
	buttonPaddingHorizontal: paddingContentHorizontal,
	});

所以如果想要修改 buttonPaddingHorizontal 需要设置 paddingContentHorizontal，但是在书写TS时很难记住这个对应关系，需要查看每个组件的Style。而且复杂组件多个token使用的同一AliasToken，比如Table的tableHeaderBg、tableFooterBg、tableBodySortBg，tableRowHoverBg都使用colorFillAlterSolid，没法单独设置一个token，不知道这是否是有意设计的。

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[aibayanyu20]

可以先提换一下ant-design-vue的版本为：

   {
		"ant-design-vue": "npm:@antd-tiny-vue/test@^4.0.7"
	}

试一下效果

[guygubaby]

我发现如果想使用 provider 来自定义组件样式，能够用到的token大部分都只能是 AliasToken。

以Button为例，它的组件Token定义是这样的:

ant-design-vue/components/button/style/index.ts

Lines 9 to 10 in 3c5fb84

	/** Component only token. Which will handle additional calculation of alias token */
	export interface ComponentToken {}

而 buttonPaddingHorizontal 是内部使用的token，并不会从ComponentToken读取:

ant-design-vue/components/button/style/index.ts

Lines 12 to 16 in 3c5fb84

	export interface ButtonToken extends FullToken<'Button'> {
	// FIXME: should be removed
	colorOutlineDefault: string;
	buttonPaddingHorizontal: number;
	}

ant-design-vue/components/button/style/index.ts

Lines 499 to 502 in 3c5fb84

	const buttonToken = mergeToken<ButtonToken>(token, {
	colorOutlineDefault: controlTmpOutline,
	buttonPaddingHorizontal: paddingContentHorizontal,
	});

所以如果想要修改 buttonPaddingHorizontal 需要设置 paddingContentHorizontal，但是在书写TS时很难记住这个对应关系，需要查看每个组件的Style。而且复杂组件多个token使用的同一AliasToken，比如Table的tableHeaderBg、tableFooterBg、tableBodySortBg，tableRowHoverBg都使用colorFillAlterSolid，没法单独设置一个token，不知道这是否是有意设计的。

设计可以说是依托勾史