如何在材质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

用于避免定义css的用例

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

Answer 2

您可以使用框元素

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

Answer 3

您可以对物料ui文档中的类使用覆盖，

第一条路

您可以执行以下操作：

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

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

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

第二种方式（更容易）

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

就做这样的事情：

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