MUI中如何修改CardHeader内title与subheader的颜色？

可行方案一：通过TypographyProps直接传递样式 #

CardHeader的title和subheader本质是内部渲染的Typography组件，你可以通过titleTypographyProps和subheaderTypographyProps直接给这两个元素设置样式，优先级高于默认主题样式，代码如下：

<Card elevation={10} className={classes.test}>
  <CardHeader 
    action={
      <IconButton onClick={() => handleDelete(note.id)}> 
        <DeleteOutlined />
      </IconButton>
    }
    title={note.title}
    // 给标题设置颜色和字号
    titleTypographyProps={{ sx: { color: '#000000', fontSize: 16 } }}
    subheader={note.category}
    // 给副标题设置颜色和字号
    subheaderTypographyProps={{ sx: { color: '#555555', fontSize: 14 } }}
  />
  {/* 其他内容 */}
</Card>

可行方案二：全局自定义主题覆盖样式 #

如果需要全局统一修改所有CardHeader的标题和副标题样式，可以在自定义主题中针对MuiCardHeader的styleOverrides配置：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiCardHeader: {
      styleOverrides: {
        title: {
          color: '#000000',
          fontSize: 16,
        },
        subheader: {
          color: '#555555',
          fontSize: 14,
        },
      },
    },
  },
});

// 用ThemeProvider包裹你的应用根组件
function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 你的应用内容 */}
    </ThemeProvider>
  );
}

原方法无效的原因 #

1. 自定义主题添加palette属性无效：CardHeader的标题/副标题默认使用MUI内置的排版样式（如theme.typography.body1），不会自动读取你新增的palette属性，必须通过components下的styleOverrides直接覆盖组件样式。
2. 直接给CardHeader加sx无效：sx样式会作用在CardHeader的容器元素上，但内部的Typography组件有自己的默认颜色样式，会覆盖容器的继承色，因此需要直接给内部的标题/副标题元素传递样式。

内容的提问来源于stack exchange，提问作者therealslim