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

IT技术 css reactjs button material-ui alignment
2021-05-06 11:56:18

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

如何将按钮居中？

4个回答

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

第一种方式

您可以执行以下操作：

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

并使用类props将其添加到您的 CardActions 组件中：

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

第二种方式（更简单）

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

只需执行以下操作：

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

您可以使用Box元素

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

对于避免定义 css 的用例

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

这是我如何使用 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>
其它你可能感兴趣的问题
上一篇仅第一层的波浪线 下一篇使用精确和严格的props