How do you change the colour of the subheader in a material ui card?

user_679841 0
Viewed 2651

I have a Material UI Card which has a dark background colour, so I need the text to be white. The style I have applied seems to successfully change the CardHeader title but not the subheader? How can I get the subheader to also change to white?

My code is as below:

const useStyles = makeStyles(theme => ({
  menuColor: {
    backgroundColor: theme.palette.primary.main,
    color: '#ffffff',
  },
}));

const ProfileUser = () => {
  const classes = useStyles();
  return (
    <Card elevation={0} className={classes.menuColor}>
      <CardHeader
        avatar={<Avatar />}
        title="Person name"
        titleTypographyProps="h4"
        subheaderTypographyProps="body1"
        subheader="Person role"
      />
    </Card>
  );
};

export default ProfileUser;
material-ui reactjs css
3 Answers

You can pass a node to the subheader prop.

One way to achieve this is to create a new makeStyle class with the desired colour:

const useStyles = makeStyles(theme => ({
    menuColor: {
      backgroundColor: theme.palette.primary.main,
      color: '#ffffff',
    },
    subColor: {
        color: '#000000'
    }
  }));

You could then pass something to the subheader prop with this class (probably best suited to a MUI typography component):

<Card elevation={0} className={classes.menuColor}>
    <CardHeader
        avatar={<Avatar />}
        title="Person name"
        titleTypographyProps="h4"
        subheaderTypographyProps="body1"
        subheader={<Typography className={classes.subColor}>Person role</Typography>}
    />
</Card>;
user_81517500

For a one-off fix, this less scalable approach might be appropriate:

<Card>
  <CardHeader
    title="Hello..."
    subheader={<Typography sx={{color: 'white',}}>...You, Me, World</Typography>}
  />
</Card>
user_17925280

You can just simply add CSS to the subheaderTypographyProps as an object and it will work. that's how it worked for me.

You can see it in the sample codes below:

<CardHeader 
    title={title} 
    subheaderTypographyProps={{ color: 'white' }} 
    subheader={`Release Date: ${release_date}`} 
    className={classes.title} 
/>
user_153659310
Related