如何在 Material-UI 中将按钮居中 [英] How to center a button in Material-UI

问题描述

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

function BigCard(props) {const { 类} = 道具；返回 (<div><卡片类名称={classes.card}><卡片内容><排版变体=display1"；className={classes.title}>开始融资！</排版></卡片内容><卡片操作><按钮尺寸=小"颜色=主要"className={classes.actions}>分享</按钮><按钮尺寸=小"颜色=主要">了解更多</按钮></CardActions></卡片>

);

如何使按钮居中?

解决方案

你可以使用 在材料 ui 文档中用类覆盖，

第一种方式

你可以这样做:

//在你的样式中添加你的 justify css const常量样式 = {...根: {justifyContent: '中心'}};

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

第二种方式(更简单)

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

只需执行以下操作:

I couldn't figure out how to center buttons in Material-UI. This is the code I have:

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

How can I center my button?

解决方案

you could use the override with classes in the material ui doc,

FIRST WAY

You can do something like :

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

And use the classes props to add this to your CardActions component :

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

SECOND WAY (easier)

OR You can use the style directly on your component, but i advise you to train how to use classes if you're working alot with material-ui

Just do something like :

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

这篇关于如何在 Material-UI 中将按钮居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！