Material UI -背景中的垂直堆叠字体和CircularProgress
Material UI -背景中的垂直堆叠字体和CircularProgress
提问于 2020-10-13 07:24:32
如何在Typography组件(这两个组件都在Backdrop组件中)之上堆叠CircularProgress组件？
目前，进度组件位于左侧，文本位于进度条的右侧。我已经尝试使用网格项目/容器，但到目前为止还没有成功。
<Backdrop open={loading} style={{zIndex: 20, opacity: 0.8, backgroundColor: '#FFFF', color: '#0000'}}>
<Grid container alignItems='center' justify='center' alignContent='center'>
<Grid item sm={12} md={12} lg={12} align='center'>
<PurpleProgress/>
</Grid>
<Grid item sm={12} md={12} lg={12} align='center'>
<Typography variant="body2" style={{color: '#000000'}}><b>{message}</b></Typography>
</Grid>
</Grid>
</Backdrop>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-13 09:18:54
您可能在小屏幕上遇到此问题，因为您没有将xs属性设置为占据整个网格。要解决此问题，如果您希望堆叠在所有屏幕大小上保持一致，则只需使用xs={12}
<Grid container alignItems='center' justify='center' alignContent='center'>
<Grid item xs={12} align='center'>
<PurpleProgress/>
</Grid>
<Grid item xs={12} align='center'>
<Typography variant="body2" style={{color: '#000000'}}><b>{message}</b></Typography>
</Grid>
</Grid>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64326572
复制相关文章
相似问题
腾讯云开发者
