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

本文介绍如何在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。

修改前:

修改后:

 

 

### 如何在 Ant Design 中实现可拖拽的环形进度条 为了实现在 Ant Design 中创建一个可以被用户拖动来改变其值的环形进度条,可以通过结合 React 的状态管理以及事件处理函数完成这一目标。下面是一个具体的例子说明如何做到这一点。 首先安装 antd 库: ```bash npm install antd --save ``` 接着,在应用中引入必要的模块并编写如下所示的主要逻辑代码: ```jsx import React, { useState } from 'react'; import { Progress } from 'antd'; const DraggableCircularProgress = () => { const [percent, setPercent] = useState(75); const handleMouseDown = (e) => { let startX = e.clientX; const moveHandler = (moveEvent) => { const diffX = moveEvent.clientX - startX; // 计算新的百分比值,并保持在合理范围内 let newPercent = Math.min(Math.max(percent + Math.round(diffX / 5), 0), 100); setPercent(newPercent); startX = moveEvent.clientX; // 更新起始位置以便下一次计算增量 }; window.addEventListener('mousemove', moveHandler); const upHandler = () => { window.removeEventListener('mousemove', moveHandler); window.removeEventListener('mouseup', upHandler); }; window.addEventListener('mouseup', upHandler); } return ( <div onMouseDown={handleMouseDown} style={{ cursor: "pointer", padding: "20px" }}> <Progress type="circle" percent={percent} /> </div> ); }; export default DraggableCircularProgress; ``` 上述代码片段定义了一个名为 `DraggableCircularProgress` 的组件[^4]。此组件内部维护着当前进度条所表示的比例 (`percent`) ,并通过监听鼠标的按下(`mousedown`)、移动(`mousemove`) 和释放(`mouseup`) 来调整这个比例。当鼠标按键被按下的时候,会记录初始坐标;随着鼠标的移动更新进度条数值直到松开为止。 值得注意的是,这里简单地假设每次水平方向上的位移对应于一定量的变化(即每五个像素代表百分之十),实际开发过程中可能需要更复杂的映射关系取决于具体需求。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值