修改antd中环形进度条的背景色，修改antd中进度条的底色

最新推荐文章于 2024-06-10 09:34:39 发布

墨语轩

最新推荐文章于 2024-06-10 09:34:39 发布

阅读量7.9k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： antd 文章标签：修改antd progress组件的底色修改antd progress组件轨道底色修改antd组件样式修改antd进度条底色

本文链接：https://blog.youkuaiyun.com/MFWSCQ/article/details/102515534

antd 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Ant Design中自定义环形进度条的样式，包括修改进度条底色和字体样式，通过添加自定义类名和使用SCSS进行样式覆盖。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前一篇写了如何修改antd中的样式，这里相当于一个应用的例子。

业务中需要使用一个环形的进度条，于是想到了antd中的progress进度条组件。组件中有修改进度条色彩的api：strokeColor，大多数情况下我们也只需要修改这个颜色，但是有时候如果我们的背景不是白色，那么我们还需要修改进度条的底色：

但是你会发现并没有修改这个底色的接口，于是这就需要我们自己来修改了：

首先找到对应的元素和对应的类：

可以看到我们的progress关于进度条的有两个path，一个是轨道，一个是轨道上面的进度条，而我们需要改变的是轨道颜色，所以只需要修改ant-progress-circle-trail类中的样式就可以了。

上图中绿色的部分就是修改轨道底色的属性，先给progress加上一个自定义的类名用于独立组件：

<Progress
    className="progress"
    type="circle"
    width="68px"
    strokeWidth="12"
    strokeColor="#0ff"
    strokeLinecap="square"
    percent={54}
/>

然后在style.scss中修改样式：这里也修改了中间显示进度字体的样式：

:global{
    .progress{
        .ant-progress-circle-trail{
            stroke:#175372 !important;
        }
        .ant-progress-text{
            color:#e4e8ec;
            font-size:14px;
            font-weight:bold;
        }
    }
}

注意：在修改轨道底色的时候我们用了!important；提高权重，是因为这个path定义颜色的时候是使用行间样式，所以这里使用!importtant。

修改前：