如何解决将 Button 和 IconButton 组件放在同一行
所以,我想在与 IconButton 的同一行中显示一个 Button,它们位于带有 prop align="center"
的 Grid 容器中,我认为这可能是导致问题的原因。我是 Material-ui 的完全初学者,我尝试了多种方法但都没有奏效,我需要帮助!
CSS:
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#main {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#app {
width: 100%;
height: 100%;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
JSX:
<Grid container spacing={1} align="center">
<Grid item xs={12} direction="row">
<Button
variant="contained"
color="secondary"
onClick={this.leaveButtonpressed}
>
Leave Room
</Button>
</Grid>
<Grid item xs={12}>
<IconButton color="primary" onClick={() => this.updateShowSettings(true)}>
<SettingsIcon />
</IconButton>
</Grid>
</Grid>
我希望我留下了适量的代码,如果您需要更多,请询问,谢谢!
解决方法
要将 Button
与 IconButton
放在同一行,减少 xs
值,因为 12 是最大值,如果给它 12,它将占据整个宽度父母的。所以,给它 6 和另一个项目给 6。
<Box>
<Grid container spacing={1} align="center" direction="row">
<Grid item xs={6} >
<Button
variant="contained"
color="secondary"
onClick={this.leaveButtonPressed}>
Leave Room
</Button>
</Grid>
<Grid item xs={6}>
<IconButton color="primary">
<Settings />
</IconButton>
</Grid>
</Grid>
</Box>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。