Skip to content

Modal设置headerBg主题后不生效? #7221

Closed
@luchanan

Description

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

Version

4.0.8

Environment

window11

Reproduction link

Steps to reproduce

<ConfigProvider :locale="getAntdLocale" :theme="themeConfig">
<AppProvider>
<RouterView />
</AppProvider>
</ConfigProvider>
const themeConfig = computed(() =>
    Object.assign(
      {
        token: {
          colorBgElevated: 'red', // 设置这个,才可以使得headerBg生效
        },
        components: {
          Modal: {
            colorText: 'red', // 生效
            headerBg: 'blue', // 单设置这个,没有效果
          },
        },
      },
      isDark.value ? darkTheme : {},
    ),
  );

简单看了下源码

const modalToken = (0, _internal.mergeToken)(token, {
modalBodyPadding: token.paddingLG,
modalHeaderBg: token.colorBgElevated,
[`${componentCls}-header`]: {
color: token.colorText,
background: token.modalHeaderBg,

取上面的token.colorBgElevated,而不是外面传进来headerBg

如果这样的话,3.x升级到4.x这个样式设置成本有点大,原以为可以把less之前设置的,放到theme,结果不是每个都可以。

现在的解决方案是:新建less文件,写样式取之前less设置过的,但是有点低效,求一个切换成本低的方法。

What is expected?

只设置headerBg能覆盖样式。像之前3.x的时候在vite.config设置'modal-header-bg': 'blue'可以覆盖样式

What is actually happening?

没有效果

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions