如何在Material-UI中居中CardHeader标题?

时间:2018-02-18 06:27:04

标签: reactjs material-ui

如何在CardHeader(Material-UI)上放置标题中心?

我正在使用Material-UI v0.18.7

这是我的代码。我尝试使用textAlign:'center'到titleStyle prop,但这不起作用。

const myTheme = {
   cardHeaderStylePref:{
      background: 'linear-gradient(to right bottom, #430089, #82ffa1)',
      color: config.actualWhite,
      height: 30,
      padding: 0
    }
}
<Card>
     <CardHeader
            title={this.props.prefName}
            style={myTheme.cardHeaderStylePref}
            subtitleColor={myTheme.color}
            titleColor={myTheme.color}
            titleStyle={{textAlign: 'center'}}
      >
      </CardHeader>
      <CardText>
            Sample text
      </CardText>
  </Card>

2 个答案:

答案 0 :(得分:3)

使用css样式textAlign移动标题中心

style={{ textAlign: 'center' }}

答案 1 :(得分:0)

传递类名应该是一个不错的选择,而不是进行内联样式设计。

<CardHeader title="Subscribe" className={classes.heading} />