CODEWITHSUNDEEP
reactjsmaterial-ui
Hemadri Dasari
Hemadri Dasari

Reputation: 33974

How to center CardHeader title in Material-UI?

How can I place title center on CardHeader (Material-UI)?

I am using Material-UI v0.18.7

Here is my code. I tried with textAlign: 'center' to titleStyle prop but that doesn't work.

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>

Upvotes: 9

Views: 19625

Answers (4)

SagarScript
SagarScript

Reputation: 1242

The solution to this is very simple once you understand the component hierarchy - so inside the CardHeader component is the title's Typography component which you can pass props to via the CardHeader component's titleTypographyProps prop like so:

<CardHeader
  title="Title"
  titleTypographyProps={{ textAlign: "center" }}
/>

The same applies for the CardHeader component's subheading prop where the subheadingTypographyProps can be passed like so:

<CardHeader
  title="Title"
  titleTypographyProps={{ textAlign: "center" }}
  subheader="Subheading"
  subheaderTypographyProps={{ textAlign: "center" }}
/>

Upvotes: 1

L. Pier Roberto
L. Pier Roberto

Reputation: 750

In the component:

import { createStyles, makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles(() =>
  createStyles({
    heading: {
      textAlign: 'center'
    },
  })
)

const MyComponent = () => {
 
 const classes = useStyles()

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

This works with "@material-ui/core v4.11.0.

Upvotes: 0

Jasbir Rana
Jasbir Rana

Reputation: 277

Instead of doing inline styling, passing a class name should be a good option.

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

Upvotes: 0

Sachin Singh
Sachin Singh

Reputation: 136

Use css style textAlign to move title center

style={{ textAlign: 'center' }}

Upvotes: 12

Related Questions