css - React-Circular-Progressbar 中的文本未居中

Question

当我创建圆形进度条时，我很难让文本居中。

这是添加进度条和文本的代码。

<div>
  <ProgressBar
     value={80}
     text="80%"
     strokeWidth={5}
     styles={buildStyles({trailColor:"red"})}
  />

此代码是进度条的样式部分。是否可以将文本置于进度条中心

const ProgressBar = styled(CircularProgressbar)`
    width: 100px;
    height: 100px;
`;

This is what the progress bar currently looks like

Answer 1

确保您正在导入 css 文件。

import "react-circular-progressbar/dist/styles.css";