如何在 Material-UI 中使按钮居中

Posted 2023-03-05

【中文标题】如何在 Material-UI 中使按钮居中

【英文标题】：How to center a button in Material-UI

【发布时间】：2018-12-03 06:27:43

【问题描述】：

我不知道如何在 Material-UI 中将按钮居中。这是我的代码：

function BigCard(props) 
    const  classes  = props;
    return (
    <div>
        <Card className=classes.card>
        <CardContent>
            <Typography variant="display1" className=classes.title>
            Start Funding!
            </Typography>
        </CardContent>
        <CardActions >
            <Button size="small" color="primary" className=classes.actions>
            Share
            </Button>
            <Button size="small" color="primary">
            Learn More
            </Button>
        </CardActions>
      </Card>
    </div>
  );

如何使我的按钮居中？

【问题讨论】：

将代码添加为文本而不是图像。另外，尝试添加一个最小的可验证示例：***.com/help/mcve

【参考方案1】：

最简单的方法是使用环绕按钮的 Box

 <Box
      sx=
        display: 'flex',
        flexDirection:  xs: 'column', md: 'row' ,
        alignItems: 'center',
        justifyContent: 'center',
      
    >
        <Button>Click me</Button>
</Box>
      

【参考方案2】：

从 MUI v5 开始，您可以使用 sx 属性应用自定义样式。因为CardActions布局已经是flex了，所以只需要将其justify-content设置为center即可。

使用 sx 而不是像其他 answer 那样的内联样式有助于降低 CSS 的特异性，并使将来更容易覆盖 CSS

<CardActions sx= justifyContent: "center" >
  <Button size="small">Learn More</Button>
</CardActions>

现场演示

【参考方案3】：

又快又脏：

<Button style=margin: '0 auto', display: "flex">
  NEXT
</Button>

【参考方案4】：

这是我使用 Material - UI 的方法

import Typography, Button from '@material-ui/core';

 <Typography align='center'>
    <Button
      color='primary'
      size='large'
      type='submit'
      variant='contained'
     >
      Sign Up
    </Button>
  </Typography>

【参考方案5】：

这将使您的按钮水平居中

 <Button
                size="medium"
                variant="contained"
                color="primary"
                style=
                    display: "flex",
                    flexDirection: "row",
                    justifyContent:"center",
                    backgroundColor: purple[500],
                    '&:hover': 
                        backgroundColor: purple[700],
                     ,
                
                
            >
            Get Hired
       </Button>

【参考方案6】：

你必须使用两个属性：display 和 justify-content

<CardActions display='flex' justifyContent='center'>

【讨论】：

我正在使用网格材质 ui。添加了 并且只有定义了这两个属性才有效。

【参考方案7】：

你可以使用Box元素

<Box textAlign='center'>
  <Button variant='contained'>
     My button
  </Button>
</Box>

【参考方案8】：

我尝试的内容如下，并且在youtube上材料ui的官方视频中也有展示。

<Grid item xs=12 sm=12 md=4 lg=4
    style=
        textAlign:'center' // this does the magic
    
>
    <Button>
         NEXT
    </Button>
</Grid>

感谢和祝福

【讨论】：

尝试了以上所有方法，但都没有奏效！

【参考方案9】：

对于避免定义 css 的用例

<Grid container justify="center">
  props.children
</Grid>

【参考方案10】：

您可以在材料 ui doc 中使用 override with classes，

第一路

你可以这样做：

//Add your justify css in your styles const
const styles = 
    ...
    root: 
        justifyContent: 'center'
    
;

并使用 classes 道具将其添加到您的 CardActions 组件中：

 <CardActions classes=root: classes.root>

第二种方式（更简单）

或者你可以直接在你的组件上使用样式，但是如果你经常使用 material-ui，我建议你训练如何使用类

只需执行以下操作：

<CardActions style=justifyContent: 'center'>