将 Button 和 IconButton 组件放在同一行
Put Button and IconButton components in the same row
所以,我想在同一行中显示一个 Button 和一个 IconButton,它们位于带有属性 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>
所以,我想在同一行中显示一个 Button 和一个 IconButton,它们位于带有属性 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>