reactjs - 将 Button 和 IconButton 组件放在同一行

Question

所以，我想在同一行显示一个带有 IconButton 的 Button，它们位于带有道具的 Grid 容器中align="center"，我认为这可能是导致问题的原因。我是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>

这是工作演示：