如何在材质UI中居中放置按钮

Question

我不知道如何在材料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>
  );

如何将按钮居中？

Answer 1

您可以使用Box元素

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

Answer 2

对于避免定义 css 的用例

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

Answer 3

您可以将覆盖与材料ui文档中的类一起使用，

第一路

您可以执行以下操作：

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

并使用类道具将其添加到CardActions组件中：

 <CardActions classes={{root: classes.root}}>

第二路（更轻松）

或者，您可以直接在组件上使用样式，但是如果您大量使用Material-UI，我建议您培训如何使用类。

只需执行以下操作：

<CardActions style={{justifyContent: 'center'}}>

Answer 4

又快又脏：

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

Answer 5

这是我如何使用 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>

Answer 6

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

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

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

现场演示