如何在react-circular-progressbar中设置字体粗细及修改已完成段背景

1. 修改进度条文本的字体粗细 #

react-circular-progressbar默认文本是SVG <text> 元素，buildStyles 方法未直接暴露字体粗细配置项，直接在styles中添加fontWeight/textWeight不会生效，以下是两种可行方案：

方案一：CSS类覆盖样式 #

给组件添加自定义类名，通过CSS强制覆盖文本样式：

// 组件代码
<CircularProgressbar
  className="custom-progress-text"
  value={percentage}
  text={`${percentage}%`}
  background
  backgroundPadding={0}
  styles={buildStyles({
    // 原有的样式配置
    textSize: "2.5rem",
    textShadow: "0 0 2px #000",
    backgroundColor: "#102558",
    textColor: "#fff",
    pathColor: "#00ade9",
    trailColor: "transparent",
    transform: "rotate(90deg)",
    transformOrigin: "center center",
    rotation: 1 / 7 + 1 / 10,
  })}
/>

/* 全局或组件内CSS */
.custom-progress-text .CircularProgressbar-text {
  font-weight: 900 !important;
}

方案二：用CircularProgressbarWithChildren自定义文本 #

通过带子元素的组件渲染普通HTML文本，完全自主控制样式：

import { CircularProgressbarWithChildren } from "react-circular-progressbar";

// 组件内部代码
<CircularProgressbarWithChildren 
  value={percentage} 
  styles={buildStyles({
    backgroundColor: "#102558",
    pathColor: "#00ade9",
    trailColor: "transparent",
    transform: "rotate(90deg)",
    transformOrigin: "center center",
    rotation: 1 / 7 + 1 / 10,
  })}
>
  <div style={{
    fontSize: "2.5rem",
    fontWeight: 900,
    textShadow: "0 0 2px #000",
    color: "#fff",
    width: "100%",
    textAlign: "center",
    marginTop: "30%"
  }}>
    {percentage}%
  </div>
</CircularProgressbarWithChildren>

2. 修改已完成段的背景 #

库本身无预置的已完成段背景功能，可通过双层进度条嵌套实现：外层放置纯色圆形作为背景，内层显示实际进度条（将trail设为透明）：

<div style={{ position: "relative", width: "200px" }}>
  {/* 底层：已完成段的背景层 */}
  <CircularProgressbar
    value={100}
    styles={buildStyles({
      pathColor: "#你需要的背景色",
      trailColor: "transparent",
      transform: "rotate(90deg)",
      transformOrigin: "center center",
      rotation: 1 / 7 + 1 / 10,
    })}
  />
  {/* 上层：实际进度条 */}
  <div style={{ position: "absolute", top: 0, left: 0, width: "100%" }}>
    <CircularProgressbar
      value={percentage}
      text={`${percentage}%`}
      background
      backgroundPadding={0}
      styles={buildStyles({
        textSize: "2.5rem",
        textShadow: "0 0 2px #000",
        backgroundColor: "#102558",
        textColor: "#fff",
        pathColor: "#00ade9", // 已完成段的前景色
        trailColor: "transparent",
        transform: "rotate(90deg)",
        transformOrigin: "center center",
        rotation: 1 / 7 + 1 / 10,
      })}
    />
  </div>
</div>

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