真的没搞懂 ！！！4.x 版本theme主题不支持组件级的样式调整，明明文档说的很清楚但源码里写的却是相反的逻辑

[fychinesepjj]

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

Version

4.2.1

Environment

vite vue3

Steps to reproduce

关于组件主题修改问题，很多人都反馈过这个问题，官方缺没有任何回复～

如果不支持那文档建议也不用写这个功能： https://www.antdv.com/docs/vue/customize-theme-cn

const themeConfig = ref({
   token: {
     colorBgElevated: 'red', // 设置这个，才可以使得headerBg生效
   },
  components: {
    // 所有组件设置都有这类问题，部分生效，部分不生效
     Modal: {
       colorText: 'red',  // 生效
       headerBg: 'blue', // 没有效果
     },
   },
});

严重怀疑是不是源码里逻辑写反了，BUG？
内部样式应该是被外部覆盖才对，现在是外部被内部覆盖
这种设计还不如 3.x 的方案，通过 less 变量进行修改

// merge 时候变量丢失？
const modalToken = mergeToken(token, {
   modalBodyPadding: token.paddingLG,
   modalHeaderBg: token.colorBgElevated,
})

What is expected?

支持官网所说的功能：https://www.antdv.com/docs/vue/customize-theme-cn

What is actually happening?

无效功能设计

[王旭]

@selicens @tangjinzhou 关注一下

[fychinesepjj]

目前最大问题是这块文档说的不清楚，看源码样式修改也很绕，涉及类型覆盖、优先级等情况，css-in-js 方式看似很牛，其实还不如less变量方式方便，可读性极差。

[fychinesepjj]

再举一个 Table 的例子，我需要调整 Table cell 的上下padding 边距，theme 是这样写的

const theme = ref({
   components: {
       Table: {
           // 生效
            paddingXS: 4,
           // 无效
           tablePaddingVerticalSmall: 4,
       }
   }
})

但是带来一个问题是，padding 上下左右都被设置成 4px，源码里是这样写的

  const tableToken = mergeToken<TableToken>(token, {
    tableFontSize: fontSize,
    tableBg: colorBgContainer,
    tableRadius: borderRadiusLG,

    tablePaddingVertical: padding,
    tablePaddingHorizontal: padding,
    tablePaddingVerticalMiddle: paddingSM,
// ----------- 水平和垂直都被设置一样的值
    tablePaddingHorizontalMiddle: paddingXS,
    tablePaddingVerticalSmall: paddingXS,
    tablePaddingHorizontalSmall: paddingXS,
// ------------
    tableBorderColor: colorBorderSecondary,
    tableHeaderTextColor: colorTextHeading,
    tableHeaderBg: colorFillAlterSolid,
    tableFooterTextColor: colorTextHeading,
    tableFooterBg: colorFillAlterSolid,
    tableHeaderCellSplitColor: colorBorderSecondary,
    tableHeaderSortBg: colorFillSecondarySolid,
    tableHeaderSortHoverBg: colorFillContentSolid,
    tableHeaderIconColor: baseColorAction

期望的是可以直接设置 tablePaddingVerticalSmall，而不是 paddingXS
总结有两个问题：

1. 变量很复杂，需要追溯到源码中去看，逻辑很绕
2. 变量定义不够直接，无法完全实现样式修改
   这里又回到 less 方式去重写 Table 样式，最终结果还不如 3.x版本方便

[fychinesepjj]

源码 components/theme/util/genComponentStyleHook.ts
其实是有设计样式重写的方式，目前看只有menu组件支持，其他组件都不支持对属性的直接重写

export default function genComponentStyleHook(...){
...

        const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
          hashId: hashId.value,
          prefixCls: prefixCls.value,
          rootPrefixCls: rootPrefixCls.value,
          iconPrefixCls: iconPrefixCls.value,

          //  ===》重要覆写逻辑 《===
          overrideComponentToken: token.value[component],
        });
        flush(component, mergedComponentToken);
        return [genCommonStyle(token.value, prefixCls.value), styleInterpolation];
      }),
      hashId,
    ];
}

使用地方 Menu 组件
components/menu/style/index.ts

    const menuDarkToken = mergeToken<MenuToken>(
        menuToken,
        {
          colorItemText: colorTextDark,
          colorItemTextHover: colorTextLightSolid,
          ...
          colorItemTextSelectedHorizontal: colorTextLightSolid,
          colorItemBgSelectedHorizontal: colorPrimary,
        },

        // ===》支持覆盖《===
        {
          ...overrideComponentToken,
        },
      );

考虑开放下？没时间可以我们提MR？

[selicens]

欢迎贡献