将 Button 和 IconButton 组件放在同一行

Question

所以，我想在同一行显示一个带有 IconButton 的 Button，它们位于带有 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>

我希望我留下了正确数量的代码，如果您需要更多代码，请询问，已经谢谢！

Answer 1

要将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>

这是工作演示：