【问题标题】: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;
    }

    JS

    $(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);    
        });
    });

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-03-29
      • 2023-03-03
      • 1970-01-01
      • 1970-01-01
      • 2015-01-04
      • 2017-03-24
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多