如何更改材质ui卡中子标题的颜色？答案

【问题标题】：How do you change the colour of the subheader in a material ui card?如何更改材质ui卡中子标题的颜色？
【发布时间】：2021-03-09 13:44:27
【问题描述】：

我有一个背景颜色较深的 Material UI Card，所以我需要将文本设置为白色。我应用的样式似乎成功更改了 CardHeader 标题而不是子标题？如何让子标题也变为白色？

我的代码如下：

const useStyles = makeStyles(theme => ({
  menuColor: {
    backgroundColor: theme.palette.primary.main,
    color: '#ffffff',
  },
}));

const ProfileUser = () => {
  const classes = useStyles();
  return (
    <Card elevation={0} className={classes.menuColor}>
      <CardHeader
        avatar={<Avatar />}
        title="Person name"
        titleTypographyProps="h4"
        subheaderTypographyProps="body1"
        subheader="Person role"
      />
    </Card>
  );
};

export default ProfileUser;

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

对于一次性修复，这种可扩展性较差的方法可能是合适的：

<Card>
  <CardHeader
    title="Hello..."
    subheader={<Typography sx={{color: 'white',}}>...You, Me, World</Typography>}
  />
</Card>

【讨论】：

【解决方案2】：

您可以将节点传递给 subheader 属性。

实现此目的的一种方法是创建一个具有所需颜色的新 makeStyle 类：

const useStyles = makeStyles(theme => ({
    menuColor: {
      backgroundColor: theme.palette.primary.main,
      color: '#ffffff',
    },
    subColor: {
        color: '#000000'
    }
  }));

然后您可以使用此类将某些内容传递给 subheader 道具（可能最适合 MUI 排版组件）：

<Card elevation={0} className={classes.menuColor}>
    <CardHeader
        avatar={<Avatar />}
        title="Person name"
        titleTypographyProps="h4"
        subheaderTypographyProps="body1"
        subheader={<Typography className={classes.subColor}>Person role</Typography>}
    />
</Card>;

【讨论】：