React-Circular-Progressbar组件内text文本无法居中问题咨询

解决方法 #

你遇到的文本偏移问题是因为react-circular-progressbar的内置文本为SVG节点，对齐属性未适配你自定义的组件宽高导致，可通过以下两种方案解决：

方案1：通过buildStyles配置内置文本样式

在原有buildStyles参数中新增文本对齐规则，同时可适配调整文字大小：

<div>
  <ProgressBar
     value={80}
     text="80%"
     strokeWidth={5}
     styles={buildStyles({
        trailColor:"red",
        textSize: "16px"
     }, {
        // 覆盖文本对齐属性
        text: {
          textAnchor: "middle",
          dominantBaseline: "middle"
        }
     })}
  />
</div>

方案2：通过styled-components直接修改内置类样式

无需修改组件props，直接在styled声明中匹配组件内置文本类名调整对齐：

const ProgressBar = styled(CircularProgressbar)`
    width: 100px;
    height: 100px;
    .CircularProgressbar-text {
        text-anchor: middle;
        dominant-baseline: middle;
    }
`;

两种方案都可实现文本完全居中，若调整进度条宽高后文字大小不适配，修改textSize参数对应数值即可。

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