材料 UI / 排版和按钮在同一行上

Question

我正在努力在同一行上对齐按钮和<Typography>组件：

这是我到目前为止所拥有的：

<Grid item lg={12} md={12} sm={12} xs={12} className={classes.register}>
<Typography noWrap className={classes.typoText} variant="subtitle2">
text1
</Typography>
<ButtonBase className={classes.labelForgot} disableFocusRipple="false" disableRipple="false" centerRipple="false">
<Typography noWrap className={classes.labelForgot} variant="subtitle2">
text2
</Typography>
</ButtonBase>
</Grid>

我的风格：

labelForgot: {
color: 'rgba(20, 176, 12,0.9)',
backgroundColor: 'transparent',
paddingLeft: 2,
'&:hover': {
color: 'rgb(57, 232, 48)',
backgroundColor: 'transparent',
}
},
root: {
backgroundSize: 'cover', 
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat',
minHeight: '100vh',
justifyContent:'center', 
overflow: 'hidden',
},
gridMain: {
margin: '0 auto',
maxWidth: 300,
},

基本上我有一个允许"100%"高度的<div>。

对于容器，我使用 css 网格主。

这是结果

Answer 1

如何在材质UI中对齐水平图标和文本

查看此页面。我被困在同样的问题上...建议的解决方案是用div 包装项目...

<div style={{
display: 'flex',
alignItems: 'center'
}}>
<Typography noWrap className={classes.typoText} variant="subtitle2">
text1
</Typography>
<ButtonBase className={classes.labelForgot} disableFocusRipple="false" 
disableRipple="false" centerRipple="false">
<Typography noWrap className={classes.labelForgot} variant="subtitle2">
text2
</Typography>
</ButtonBase>
</div>

我也尝试从材料UI中使用网格来做到这一点，但是标题和按钮遇到问题