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

我知道这是一篇很老的文章，但是为将来参考，任何偶然发现此问题的人都可以看看：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>
}

Answer 3

这段代码对我有用：

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

注释：包：“ @ material-ui / core”：“ ^ 4.5.2” 我使用此解决方案是因为我使用了makeStyles模块。

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

3 个答案: