How to change the color of CardHeader Title

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

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

[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" />