时间戳

首页 > 解决方案 > 如何更改材质ui卡中子标题的颜色？

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

问题描述

我有一个具有深色背景颜色的 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;

标签： cssreactjsmaterial-ui

解决方案

您可以将节点传递给 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>;

推荐阅读