如何修改Ant Design Progress进度条末尾显示的百分比文本颜色

你修改外层div的color属性不生效，是因为Ant Design Progress组件的百分比文本自带独立的类名样式，优先级高于外层继承的样式，需要精准命中目标类名进行覆盖。

方案1：自定义CSS覆盖（兼容所有AntD版本） #

给Progress组件添加自定义类名，再针对其自带的ant-progress-text类设置颜色即可：

• 组件代码修改：

<Progress 
  strokeColor={{'0%': '#eb5c20','100%': '#c6224e'}} 
  percent={90} 
  status='active'
  {/* 新增自定义类名 */}
  className="custom-progress"
/>

• 对应CSS代码：
  如果是普通全局CSS：

.custom-progress .ant-progress-text {
  /* 改成你需要的浅色，比如白色 */
  color: #fff !important;
}

如果项目用了CSS Module（即样式文件后缀为.module.css/.module.less），需要用:global包裹内置类名：

.custom-progress :global(.ant-progress-text) {
  color: #fff !important;
}

如果不想使用!important，可以叠加外层容器的类名提升选择器优先级即可，比如外层div类名为dark-bg-wrapper：

.dark-bg-wrapper .custom-progress .ant-progress-text {
  color: #fff;
}

方案2：主题定制（仅适用AntD v5及以上版本） #

如果使用的是AntD v5，可以直接通过ConfigProvider修改Progress组件的主题token，无需写自定义CSS：

import { ConfigProvider, Progress } from 'antd';

// 在你的进度条组件外层包裹ConfigProvider即可
<ConfigProvider
  theme={{
    components: {
      Progress: {
        // 直接设置进度条文本颜色
        textColor: '#fff',
      },
    },
  }}
>
  <Progress 
    strokeColor={{'0%': '#eb5c20','100%': '#c6224e'}} 
    percent={90} 
    status='active' 
  />
</ConfigProvider>

内容的提问来源于stack exchange，提问作者Klay