Material-ui: How to change the color of CardHeader Title

[rjkowalewski]

I cannot seem to be able to change the color of the CardHeader title text.

I have a 'styles' constant as follows:

const styles = theme => ({
  loginCard: {
    height: 200,
    width: 300
  },
  loginCardHeader: {
    backgroundColor: theme.palette.primary.main,
    color: '#fff'
  }
});

And my React.Component as follows:

class Login extends React.Component {
  render() {
    const { classes, theme } = this.props;

    return (
      <div>
        <Card className={classes.loginCard}>
          <CardHeader className={classes.loginCardHeader} title='Login' />
        </Card>
      </div>
    );
  }
}

The backgroundColor is applying to the CardHeader via loginCardHeader but the color is not.

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.38 |
| React | 16.2.0 |

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[oliviertassinari]

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import CardHeader from 'material-ui/Card';

const styles = theme => ({
  title: {
    color: 'red',
  }
});

class RecipeReviewCard extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <CardHeader
        classes={{
          title: classes.title,
        }}
        title="Shrimp and Chorizo Paella"
        subheader="September 14, 2016"
      />
    );
  }
}

RecipeReviewCard.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(RecipeReviewCard);

[hiteshsahu]

Change size and color :

title: {
    color: "red",
    fontSize: 25
  },

[nemethricsi]

import { withStyles } from 'material-ui/styles';

is it possible without HOC?

[jeffshek]

import { withStyles } from 'material-ui/styles';

is it possible without HOC?

Yep, works fine in hooks too.

const useStyles = makeStyles(() => ({
  title: {
    color: 'red',
    margin: 50,
    padding: 60,
    fontSize: 300,
  }
}));
const classes = useStyles();

<CardHeader className={classes.title} title="Delete My Account - WARNING PERMANENT" />