如何在react-circle组件的环形区域设置并调整文本样式？

由于react-circle默认的文本配置仅支持简单百分比展示，要实现类似目标图的多行自定义文本样式，你可以通过传入自定义children替换默认内容，具体实现如下：

1. 直接添加内联样式的自定义文本 #

利用组件支持children的特性，在<Circle>标签内写入目标文本结构，通过内联样式快速匹配样式：

<Circle
  progress={improvementRate}
  animate
  animationDuration="1s"
  responsive
  size="223"
  lineWidth="50"
  progressColor={color}
  bgColor="green"
  roundedStroke={false}
  showPercentage={false} // 必须关闭默认百分比显示
  showPercentageSymbol={false}
  percentSpacing={10}
>
  {/* 自定义中心文本布局 */}
  <div style={{ 
    textAlign: 'center', 
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    height: '100%'
  }}>
    <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#222' }}>
      {improvementRate}%
    </div>
    <div style={{ fontSize: '14px', color: '#666', marginTop: '6px' }}>
      完成率
    </div>
  </div>
</Circle>

2. 用CSS类管理样式（推荐） #

如果样式逻辑复杂，建议提取CSS类来维护，避免内联样式冗余：

定义CSS样式 #

/* 环形中心文本容器 */
.circle-center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

/* 百分比数字样式 */
.circle-percent {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
}

/* 下方说明文本样式 */
.circle-label {
  font-size: 0.875rem;
  color: #666;
  margin-top: 4px;
}

应用到组件 #

<Circle
  progress={improvementRate}
  animate
  animationDuration="1s"
  responsive
  size="223"
  lineWidth="50"
  progressColor={color}
  bgColor="green"
  roundedStroke={false}
  showPercentage={false}
  showPercentageSymbol={false}
  percentSpacing={10}
>
  <div className="circle-center-content">
    <div className="circle-percent">{improvementRate}%</div>
    <div className="circle-label">完成率</div>
  </div>
</Circle>

3. 调整默认容器样式（可选） #

如果自定义文本位置偏移，可修改react-circle自带的文本容器样式：

.react-circle__text {
  /* 确保容器占满环形内部空间，保证文本居中 */
  width: 100%;
  height: 100%;
}

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