Material UI 循环进度中的文本答案

【问题标题】：Text inside Circular Progress of Material UIMaterial UI 循环进度中的文本
【发布时间】：2017-04-14 23:33:47
【问题描述】：

我想知道...有谁知道是否可以在 Material UI 循环进度元素的内部添加自定义文本？如果是这样，最好的方法是什么？谢谢！

【问题讨论】：

查看材料 ui 提供的圆形进度表的谷歌图像，似乎可以更改内部文本。

标签： javascript reactjs react-jsx material-ui

【解决方案1】：

Material-UI 基于 Google 的 Material Design 规范。 spec for "Progress Activity" 在任何圆形元素中都没有文本。 MUI 只会正式支持材料设计规范。

如果您查看the code for CircularProgress，您会发现它正在渲染一个 SVG 元素。（也可以在浏览器的开发工具中看到。）

我建议你 fork MUI 并摆弄 Circular Progress 元素，直到你得到你想要的。

【讨论】：

【解决方案2】：

您可以将文本设为绝对文本并将其放在进度条的顶部。

<div style={{position: 'relative'}}>
    <span style={{position: 'absolute', top: '10px', left: '2px'}}>100%</span>
    <CircularProgress />
</div>

top 和 left 的值你可以根据自己的设置。

【讨论】：

【解决方案3】：

将添加到 display: flex、justifyContent: center 和 alignItems: center。还要将position: absolute 添加到

<Box display='flex' justifyContent='center' alignItems='center'>
    <CircularProgress/>
    <Typography position='absolute'>{99}%</Typography>
</Box>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案4】：

就像 Mike 指出的那样，在 Mui 中没有内置支持在进度条内添加文本。使用 css 绝对属性是一种选择，但可能存在潜在的响应问题。我建议使用React-circular-progressbar 作为替代。它是响应式的，但请确保在其他父元素（如 Box/Paper 或其他任何所需大小的元素）中使用它。

【讨论】：