【问题标题】: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>
      

      【讨论】:

        猜你喜欢
        • 2019-12-29
        • 1970-01-01
        • 2018-12-03
        • 1970-01-01
        • 2021-11-13
        • 2019-10-13
        • 2019-10-09
        • 1970-01-01
        • 2018-09-25
        相关资源
        最近更新 更多