如何更改进度条末尾显示的百分比的文本颜色答案

【问题标题】：How to change the text color for the percentage shown at the end of the progress bar如何更改进度条末尾显示的百分比的文本颜色
【发布时间】：2021-12-08 02:59:16
【问题描述】：

我正在使用Ant Design 的进度条，我想更改进度条末尾显示的百分比的文本颜色，因为我的背景颜色是黑色，因此无法看到显示的百分比（这是黑色的）。我不知道如何更改它，因为没有 API 可以更改文本颜色。

这是我的代码行：

 <Progress strokeColor={{'0%': '#eb5c20','100%': '#c6224e'}} percent={90} status='active' />

此进度条位于 div 内，即使我将 CSS color tag 更改为较浅的颜色，它也无法完成这项工作。

【问题讨论】：

标签： css reactjs antd

【解决方案1】：

您应该使用ant-progress-text 类的color 属性更改文本颜色。例如，您可以这样做：

.ant-progress-text {
  color: white;
}

您可能不想全局更改所有进度条的颜色，您可以通过使用其父类名称（类似于.parent-div-classname .ant-progress-text）引用该特定进度条来实现。

或者，您可以在Progress 组件上添加一个className 属性来为其分配一个自定义类，并使用它来应用您的颜色css 属性。

【讨论】：

尝试将其添加到我的 .less 文件中，但没有成功。
你能分享一下你添加的具体内容吗？
.antd-progress-text{ color: #c4c4c4; }
类名是ant-progress-text而不是antd-progress-text。您应该删除d。
抱歉打错了..ant-progress-text 也不能正常工作..

【解决方案2】：

HTML

<div class = "progressBar">
    <div class = "background">0%</div>
    <div class = "container">
        <div class = "foreground">0%</div>
    </div>
</div>
<button>Play</button>

CSS

*:not(button) {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    padding: 10px;
}

.progressBar {
    width: 150px;
    height: 15px;
    border: 1px solid #000;
    position: relative;
    margin-bottom: 5px;
}

.progressBar .background,
.progressBar .foreground {
    width: 150px;
    height: 13px;
    font: normal 10px/13px Sans-Serif;
    text-align: center;
}

.progressBar .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    overflow: hidden;
}

.progressBar .foreground {
    background-color: navy;
    color: yellow;
}

$(function() {
    $("button").click(function() {
        var start = 0;
        var interval = setInterval(function() {
            if(start >= 100) clearInterval(interval);
            $(".progressBar").find(".background, .foreground")
                             .text(start + "%")
                             .end()
                             .find(".container")
                             .css("width", start++ + "%");
        }, 10);    
    });
});

【讨论】：