如何将 fontSize 应用于 Material-UI 中的 CardHeader 标题？

Question

我想将 CardHeader 中的标题更改为 16px。我尝试在 App.js 中更改主题，但似乎不起作用

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

在组件中，

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

标题字体仍然没有改变。我需要做什么来解决这个问题？

Answer 1

您不能定位标题类或 id 并更改 fontSize 或作为道具传递

titleTypographyProps={{variant:'h1' }}

该对象接受：'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit', "display4", 'display3', 'display2', 'display1', 'headline', 'title', 'subheading'

在你的代码中它会是

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

Answer 2

在MUI v5中，您可以通过直接在or中添加prop来使用系统属性：TypographyfontSizetitleTypographyPropssubheaderTypographyProps

<CardHeader
  titleTypographyProps={{
    fontSize: 22,
  }}
  subheaderTypographyProps={{
    fontSize: 10,
  }}
  title="Shrimp and Chorizo Paella"
  subheader="September 14, 2016"
/>

现场演示

Answer 3

这段代码对我有用：

<CardHeader
title={
         <Typography gutterBottom variant="h5" component="h2">
            /* Content goes here */
         </Typography>
      } />

注意： package: "@material-ui/core": "^4.5.2" 我使用这个解决方案是因为我使用了 makeStyles 模块。

Answer 4

我知道这是很老的帖子了，但是为了将来的参考，任何偶然发现这个问题的人都可以看一下： https: //github.com/mui-org/material-ui/issues/7521

基本上，我们可以使用该classes属性，它采用键/值对，并可以<ContentHeader />基于该属性向组件的某些部分添加样式。

例子：

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