如何在材质ui TableBody内将div拉伸到100％宽度答案

【问题标题】：How to stretch div to 100% width inside material ui TableBody如何在材质ui TableBody内将div拉伸到100％宽度
【发布时间】：2021-10-14 13:56:43
【问题描述】：

我正在尝试在材质 UI TableBody 内显示一个 CircularProgress。以下是我尝试过的，但它没有像我预期的那样居中。（请注意只贴了相关代码）

const styles = (theme) => ({
  progress: {
    width: "100%",
    display: "flex",
    justifyContent: "center",
    minHeight: "10vh",
    alignItems: "center"
  }
})

<TableBody>
 <div className={classes.progress}>
   <CircularProgress />
 </div> 
</TableBody>

看起来像这样，但我希望它位于TableBody 的中心。目前只取第一列的宽度。

【问题讨论】：

CircularProgress 组件有哪些样式？
没有应用样式
是的，它是 100%。我通过应用背景颜色来检查它。它需要全宽

标签： css reactjs flexbox material-ui

【解决方案1】：

在这里，您的 div 将 100% 扩展到父级 TableBody 您可以将表格主体设为 100% 或将 position: 'absolute' 分配给 div

【讨论】：

我尝试让TableBody 100%，但没有成功。当我将 div 设为绝对时，它会延伸到表格主体之外。所以，不幸的是，这些解决方案都没有解决我的问题。