Как центрировать кнопку в пользовательском интерфейсе - PullRequest
Новая
       21

Как центрировать кнопку в пользовательском интерфейсе

0 голосов
/ 24 июня 2018

Я не мог понять, как центрировать кнопки в пользовательском интерфейсе. Вот код, который у меня есть: 

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>
  );

Как мне отцентрировать мою кнопку?

1 Ответ

0 голосов
/ 25 июня 2018

вы можете использовать переопределение с классами в материале документа,

FIRST WAY

Вы можете сделать что-то вроде: 

//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'}}>
...