How to apply fontSize to CardHeader title in MUI? - reactjs

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>
}

Answer 3

this piece of code worked for me:
<CardHeader
title={
<Typography gutterBottom variant="h5" component="h2">
/* Content goes here */
</Typography>
} />
notes: package: "#material-ui/core": "^4.5.2"
I use this solution because I make use of makeStyles module.

Answer 4

In MUI v5, you make use of system properties in Typography by adding a fontSize prop directly in titleTypographyProps or subheaderTypographyProps:
<CardHeader
titleTypographyProps={{
fontSize: 22,
}}
subheaderTypographyProps={{
fontSize: 10,
}}
title="Shrimp and Chorizo Paella"
subheader="September 14, 2016"
/>
Live Demo