How to apply fontSize to CardHeader title in MUI?

Question

I want to change the title in CardHeader to 16px. I tried changing theme in App.js but it does not seem to work

const theme = createMuiTheme({
  typography: {
    useNextVariants: true,
    overrides: {
      MuiCardHeader: {
        titleTypographyProps: {
          variant:'h2'
        }
      }
    }
  }
);

In the component:

<CardHeader
  action={
    <IconButton color="inherit">
      <MoreHorizIcon />
    </IconButton>
  }
  title="Titletext"
/>

The title font still does not change. What do I need to do to fix this?

Answer 1

you cant target the header class or id and change fontSize or pass as props

titleTypographyProps={{variant:'h1' }}

that object acepts:'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit', "display4", 'display3', 'display2', 'display1', 'headline', 'title', 'subheading'

in your code it would be

<CardHeader
        action={
        <IconButton color="inherit">
            <MoreHorizIcon />
        </IconButton>
        }
        titleTypographyProps={{variant:'h1' }}
        title="Titletext"
      />

Answer 2

I know this is quite old post now, but for future references anyone who stumbles upon this question might take a look at: https://github.com/mui-org/material-ui/issues/7521

Basically, we can use the classes property, which takes key/value pairs, and can add style to parts of the <ContentHeader /> component based on that.

Example:

const useStyles = makeStyles({
  root: {
    minWidth: 300,
    maxWidth: 500,
    margin: "10px 15px 10px 0",
  },
  headerTitle: {
    maxWidth: 300
  }
});

const CustomizedCard = () => {
  const materializeUIClasses = useStyles();

  return (
    <Card className={materialUIClasses.root}>
      <CardHeader 
        title={title}

        // Here we can target whatever part we need: title, subtitle, action
        classes={{
          title: materialUIClasses.headerTitle
        }} 
      />
   </Card>
}