如何在Material-UI中将fontSize应用于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' }}

那个对象acepts：'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"
      />