如何使用 Material UI 使 ButtonGroup 居中？答案

【问题标题】：How to center a ButtonGroup using Material UI?如何使用 Material UI 使 ButtonGroup 居中？
【发布时间】：2020-05-12 19:04:52
【问题描述】：

我正在尝试使用 React 中的 Material UI 使按钮组居中，无论我做什么，它都会向左浮动。

<Container>
    <ButtonGroup style={{alignItems:"center"}} color="primary" aria-label="outlined primary button group">
        <Button onClick={()=>{setDonation(1)}}>$1</Button>
        <Button onClick={()=>{setDonation(5)}}>$5</Button>
        <Button onClick={()=>{setDonation(10)}}>$10</Button>
        <Button onClick={()=>{setDonation(25)}}>$25</Button>
    </ButtonGroup>
</Container>

这是 chrome 检查器的图片：

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以通过将以下 CSS 属性应用到容器来使 ButtonGroup 居中。

const useStyles = makeStyles({
  container: {
    display: "flex",
    justifyContent: "center",
  },
});

const classes = useStyles();

<Container className={classes.container}>
    <ButtonGroup
      color="primary"
      aria-label="outlined primary button group"
    >
        <Button>$1</Button>
        <Button>$5</Button>
        <Button>$10</Button>
        <Button>$25</Button>
    </ButtonGroup>
</Container>

这里也有文档https://material-ui.com/styles/basics/。

【讨论】：

【解决方案2】：

刚刚发现你可以将 Box 组件用作一个容器，它具有 css 中 div 容器的所有属性（至少是必需的）

<Box 
    display="flex" 
    flexDirection="column"
    alignItems="center"
    justifyContent="center"
>
    <ButtonGroup style={{textAlign:"center"}} color="primary" aria-label="outlined primary button group">
        <Button onClick={()=>{setDonation(1)}}>$1</Button>
        <Button onClick={()=>{setDonation(5)}}>$5</Button>
        <Button onClick={()=>{setDonation(10)}}>$10</Button>
        <Button onClick={()=>{setDonation(25)}}>$25</Button>
    </ButtonGroup>
</Box>

【讨论】：