Material-ui: [CardHeader] We can't override the header title color or the subheader title color.

[mauriciojovel]

Problem description

If you try to change the title or subtitle color, you can't do that, this is because the component is using a Typography component to render the text but doesn't exists any classname to override the default values.

Link to minimal working code that reproduces the issue

const style = {
  color: #fff,
};
<Card>
  <CardHeader
    title="Title"
    className={classes.header}
    classes={{
      content: classes.headerColorText,
    }}
    style={style}
  />
</Card>

Versions

• Material-UI: 1.0-beta
• React: All
• Browser: All

[oliviertassinari]

You are right. What about implementing the same solution as with the DialogTitle?

[mauriciojovel]

Hi @oliviertassinari ,

I think is a good solution but, if you only want to use the header like title, you will need to pass the hole Typography component, maybe you can add to the Typography element the property color="inherit" or add a new class to support override the classes that the Typography object use.

Best,

[bmuenzenmeyer]

I'm interested in helping out - and think I can follow along enough to go with @oliviertassinari's solution. Any objections?

[oliviertassinari]

@bmuenzenmeyer I was thinking of the following:

• We can have a disableTypography property that simply removes the <Typography /> and let users providing it.
• We can also have a classes.title and classes.subheader customization point.

The first addition is brutal and allows full customization while the second addition gracefully covers 80% of the use cases.

[bmuenzenmeyer]

@oliviertassinari would you expect both of these efforts to be made in the same PR? As the following will demonstrate, I think it is necessary.

In my attempts at only undertaking the second point, I have the following in CardHeader.js:

  return (
    <CardContent className={className} {...other}>
      {avatar &&
        <div className={classes.avatar}>
          {avatar}
        </div>}
      <div className={classes.content}>
+       <Typography type={titleType} component="span" className={classes.title}>
          {title}
        </Typography>
        <Typography
          type={subheaderType}
          component="span"
          color="secondary"
+         className={classes.subheader}
        >
          {subheader}
        </Typography>
      </div>
    </CardContent>
  );
}

my first attempt at usage

which only seems to work if I pass the whole classes object into <CardHeader/> like this, inside docs/../RecipeReviewCard.js

  <CardHeader
    avatar={
      <Avatar aria-label="Recipe" className={classes.avatar}>
        R
      </Avatar>
    }
+   classes={classes}
    title="Shrimp and Chorizo Paella"
    subheader="September 14, 2016"
  />

This looks to completely override the default styles of CardHeader.js, which I doubt is an intended side-effect (but does achieve the goal of being able to pass classes defined on RecipeReviewCard down into the title and subheader).

I think the main problem (I am a bit new to react, apologies), is that the render() function of <CardHeader/> does not support the composition of the title and subheader like it does the avatar... hence my first question about attempting the larger scale refactor of the Typography elements within CardHeader. I imagine exposing these as unique, "composable" components like avatar would help.

(I didn't feel this was ready for PR, so hence the long comment)

[bmuenzenmeyer]

Oh, I understand, re-reading the OP, the expected usage would be.

  <CardHeader
    avatar={
      <Avatar aria-label="Recipe" className={classes.avatar}>
        R
      </Avatar>
    }
+  classes={{
+    title: classes.title,
+    subheader: classes.subheader,
+  }}
    title="Shrimp and Chorizo Paella"
    subheader="September 14, 2016"
  />

[oliviertassinari]

@bmuenzenmeyer You are on the right path 👍 . You can submit two PRs if you prefer.

[shawnkoh]

Hi I'm sorry for reviving this closed issue.

I'm trying to create an editable Card, with an editable CardHeader's title and subheader.
I'm trying to pass an Input as the title and subheader props, but this skips the CardHeader's inbuilt typography.

May I know what is the best way to inherit the Typography styles for the editable title and subheaders?