MUI调色板是可扩展的，但是您需要做一些事情来创建新颜色并应用到Button组件。
首先，我们定义一个带有自定义颜色变量的主题，你可以使用augmentColor()来生成PaletteColor，这样它就可以在你的Button中使用：

import { purple } from "@mui/material/colors";

const { palette } = createTheme();
const theme = createTheme({
  palette: {
    myAwesomeColor: palette.augmentColor({ color: purple }),
    // Use this code if you want to use an arbitrary color
    // myAwesomeColor: palette.augmentColor({
    //   color: {
    //     main: "#00ff00"
    //   }
    // })
  }
});

然后更新你的TypeScript定义，这样它就可以在引用Palette和PaletteOption对象时识别属性myAwesomeColor（如果你使用JavaScript，跳过这一步）。你还需要扩展Button的颜色属性定义，因为默认情况下它只接受以下值：
x一个一个一个一个x一个一个二个x
最后一步是为Button注入自定义主题并设置自定义颜色：

<ThemeProvider theme={theme}>
  <Button color="myAwesomeColor" variant="contained">
    AWESOME
  </Button>
</ThemeProvider>

现场演示

相关答案

• Change primary and secondary colors in MUI

除了需要将MyTheme中的purple更改为类似purple[500]的内容之外，我不知道为什么这对您不起作用。您可能无法以这种方式覆盖除primary和secondary之外的任何内容。
无论如何，这里有一个解决方法：
在MyTheme.js中：

accent: { backgroundColor: purple[500], color: '#000' }

然后在App.js中：

<Button
  variant="raised"
  style={MyTheme.palette.accent}
  className={classes.primary}>
    Accent
</Button>

here就是一个工作示例。

对于MUI v5，这似乎对我有效：

let theme = createTheme({
  palette: { 
    customPrimary: {
      main: '#ff3402',
    },
  },
});

theme = createTheme(theme, {
  components: {
   MuiAppBar: {
      styleOverrides: {
        colorPrimary: {
          backgroundColor: theme.palette.customPrimary.main,
        },
      },
    },
}});

对于那些在Typescript中创建自定义颜色的人，我是这样做的。我添加了黄色和深色类型：

interface Palette {
    dark?: Palette['primary'];
    yellow?: Palette['primary'];
  }
  interface PaletteOptions {
    dark?: PaletteOptions['primary'];
    yellow?: PaletteOptions['primary'];
  }
}

然后根据类型设置它们。这花了我一秒钟的时间来弄明白。当我在PaletteOptions上添加dark类型时，它的类型就像PaletteColorOptions一样，它有以下类型：

export type PaletteColorOptions = SimplePaletteColorOptions | ColorPartial;

export interface SimplePaletteColorOptions {
  light?: string;
  main: string;
  dark?: string;
  contrastText?: string;
}

所以我用main来定义它的类型中的颜色。

const theme = createTheme({
dark: {
      main: '#5b504b'
    },
    yellow: {
      main: '#f4e6c2',
      dark: '#e1d7bd',
    }
}

希望这对任何有 typescript 打字问题的人都有帮助。

添加自定义调色板应该没有问题，如下所示：

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

const theme = createTheme({
  palette: {
    primary: {
      main: "#2a9461"
    },
    secondary: {
      main: "#494c7d"
    },
    companyRed: {
       main: "#E44D69",
       contrastText: "#000",
    },
  }
});

使用MUI颜色（如"紫色"）必须通过对象键访问，因为每种颜色都有50到900（亮到暗）的着色值：

import { purple } from "@mui/material/colors";
import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    primary: {
      main: "#2a9461"
    },
    secondary: {
      main: "#494c7d"
    },
    companyRed: {
       main: '#E44D69',
       contrastText: "#000",
    },
    accent: {
      main: purple[50] // Or purple[100], purple[200]
    }
  }
});

但如果你想创建自己的紫色调色板（和其他颜色）来匹配品牌，你可以添加一个新的js文件，包含所有自定义颜色和阴影，并将其导入主应用程序：

• 颜色. js * 文件

一个二个一个一个
以下是创建自定义主题、调色板和颜色https://muhimasri.com/blogs/how-to-customize-theme-and-colors-in-material-ui/的详细说明