React 18 + MUI 5.15 + TS函数组件自定义调色板主色方法

步骤1：创建并注入自定义主题 #

通过createTheme覆盖MUI默认调色板的主色，再用ThemeProvider将主题全局注入应用：

import React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import Button from '@mui/material/Button';

// 自定义主题，替换主色
const customTheme = createTheme({
  palette: {
    primary: {
      main: '#2e7d32', // 替换为你需要的主色值
      light: '#60ad5e', // 可选：主色浅色调
      dark: '#005005', // 可选：主色深色调
      contrastText: '#ffffff', // 可选：主色文本的对比色
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <CssBaseline /> {/* 统一浏览器默认样式 */}
      <div style={{ padding: '2rem' }}>
        <CustomContent />
      </div>
    </ThemeProvider>
  );
}

步骤2：在组件中使用自定义主色 #

有三种常用方式：

方式1：利用MUI组件的color属性

大部分内置组件支持color="primary"属性，自动应用自定义主色：

function CustomContent() {
  return (
    <>
      <Button color="primary" variant="contained">
        自定义主色按钮
      </Button>
    </>
  );
}

方式2：通过useTheme钩子获取主题颜色

在自定义样式中直接引用主题变量：

import { useTheme } from '@mui/material/styles';

function CustomContent() {
  const theme = useTheme();

  return (
    <div
      style={{
        backgroundColor: theme.palette.primary.main,
        color: theme.palette.primary.contrastText,
        padding: '1rem',
        borderRadius: '4px',
      }}
    >
      自定义背景色容器
    </div>
  );
}

方式3：在sx属性中直接调用主题

MUI的sx属性支持直接访问主题变量，写法更简洁：

function CustomContent() {
  return (
    <div
      sx={{
        bgcolor: 'primary.main',
        color: 'primary.contrastText',
        padding: 2,
        borderRadius: 1,
      }}
    >
      使用sx属性的自定义容器
    </div>
  );
}

TypeScript注意事项 #

如果给主色新增了默认以外的字段（比如custom: '#xxx'），需要扩展MUI类型避免报错，在项目类型声明文件（如src/types/mui.d.ts）中添加：

declare module '@mui/material/styles' {
  interface Palette {
    primary: PaletteColor & {
      custom?: string;
    };
  }
}

仅修改默认的main/light/dark/contrastText字段时，无需额外扩展类型。

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