如何让MUI Typography组件的color属性识别自定义调色板颜色？

你已经正确扩展了Palette接口并配置了自定义的tertiary调色板，但Typography的color属性默认不支持自定义颜色值，需要额外扩展Typography的属性类型约束，具体步骤如下：

1. 扩展Typography的Color属性类型 #

在你的theme.ts文件中，添加对@mui/material/Typography模块的接口扩展，将tertiary加入到可识别的颜色选项中：

declare module "@mui/material/styles" {
  interface Palette {
    tertiary: Palette['primary'];
  }
  interface PaletteOptions {
    tertiary: PaletteOptions['primary'];
  }
}

// 新增：扩展Typography的颜色属性选项
declare module "@mui/material/Typography" {
  interface TypographyPropsColorOverrides {
    tertiary: true;
  }
}

export const theme = createTheme({
  palette: {
    primary: {/* 你的配置 */},
    secondary: {/* 你的配置 */},
    tertiary: {
      main: '#FFE461',
      dark: '#FED047',
      light: "#FFEC92"
    }
  }
});

2. 确认ThemeProvider正确传入主题 #

确保你的根组件已经通过ThemeProvider包裹并传入自定义主题：

import { ThemeProvider } from '@mui/material/styles';
import { theme } from './theme';

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

3. 使用自定义颜色 #

现在你可以直接在Typography组件中使用color="tertiary"，组件会正确映射到你配置的调色板颜色：

<Typography color="tertiary">自定义调色板颜色的文本</Typography>

原理说明 #

MUI组件的属性（如Typography的color）的可选值由组件专属的PropsOverrides接口约束，仅扩展Palette接口只能让主题识别自定义颜色，但组件本身不知道这个新选项。通过扩展TypographyPropsColorOverrides，我们告诉TypeScript和MUI组件：tertiary是合法的颜色属性值，组件会自动从主题调色板中读取对应颜色。

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