pro-components 🧐[问题]如何修改pro-component的样式

🧐 问题描述 | Problem description

使用 pro-cli 建的项目我想修改所有的ProCard的标题颜色通过查看源码

 [`${componentCls}-title`]: {
        color: token.colorText,
        fontWeight: 500,
        fontSize: token.fontSizeLG,
        lineHeight: token.lineHeight,
      }

得知文本颜色是从token.colorText取的, 于是在config.ts中作如下配置

antd: {
    configProvider: {
      theme: {
        cssVar: true,
        components: {
          ProCard: {
            colorText: 'red',
          },
        },
      },
    },
  }

发现这种方式无法修改文字的颜色接着尝试如下配置，加一层token

  antd: {
    configProvider: {
      theme: {
        cssVar: true,
        components: {
          ProCard: {
            token: {
              colorText: 'red',
            },
          },
        },
      },
    },
  },

仍然不生效，请问这里的配置应该怎么写？

Jun 04 '24 00:06 xclw2000

用的是card的配置没专门搞了个procard

Jun 04 '24 15:06 chenshuai2144

我设置了Card，但仍然不生效

  antd: {
    configProvider: {
      theme: {
        components: {
          Card: {
            colorText: 'red',
          },
          ProCard: {
            colorText: 'red',
          },
        },
      },
    },
  },

生成的style里仍然是黑色

.ant-pro-card .ant-pro-card-title {
    color: rgba(0, 0, 0, 0.88);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5714285714285714;
}

通过查看Card的源码，发现在影响Card的token是colorTextHeading，于是做以下修改

  antd: {
    configProvider: {
      theme: {
        components: {
          Card: {
            colorTextHeading: 'green',            
          },
          ProCard: {
            colorTextHeading: 'blue'            
          },
        },
      },
    },
  },

发现只能对Card生效，对ProCard不生效