更新- 此答案是为 Material-UI 的 v4 编写的。v5 直接支持自定义颜色，我在最后添加了一个 v5 示例。

尽管 Material-UI 在 v4 中不直接支持此功能，但您可以包装Button在您自己的自定义组件中以添加此功能。

下面使用代码的样式副本textPrimary，outlinedPrimary和containedPrimary但内容替换“主”与“三级”。

import * as React from "react";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
import clsx from "clsx";
import { fade } from "@material-ui/core/styles/colorManipulator";

const useStyles = makeStyles(theme => ({
  textTertiary: {
    color: theme.palette.tertiary.main,
    "&:hover": {
      backgroundColor: fade(
        theme.palette.tertiary.main,
        theme.palette.action.hoverOpacity
      ),
      // Reset on touch devices, it doesn't add specificity
      "@media (hover: none)": {
        backgroundColor: "transparent"
      }
    }
  },
  outlinedTertiary: {
    color: theme.palette.tertiary.main,
    border: `1px solid ${fade(theme.palette.tertiary.main, 0.5)}`,
    "&:hover": {
      border: `1px solid ${theme.palette.tertiary.main}`,
      backgroundColor: fade(
        theme.palette.tertiary.main,
        theme.palette.action.hoverOpacity
      ),
      // Reset on touch devices, it doesn't add specificity
      "@media (hover: none)": {
        backgroundColor: "transparent"
      }
    }
  },
  containedTertiary: {
    color: theme.palette.tertiary.contrastText,
    backgroundColor: theme.palette.tertiary.main,
    "&:hover": {
      backgroundColor: theme.palette.tertiary.dark,
      // Reset on touch devices, it doesn't add specificity
      "@media (hover: none)": {
        backgroundColor: theme.palette.tertiary.main
      }
    }
  }
}));

const CustomButton = React.forwardRef(function CustomButton(
  { variant = "text", color, className, ...other },
  ref
) {
  const classes = useStyles();
  return (
    <Button
      {...other}
      variant={variant}
      color={color === "tertiary" ? "primary" : color}
      className={clsx(className, {
        [classes[`${variant}Tertiary`]]: color === "tertiary"
      })}
      ref={ref}
    />
  );
});
export default CustomButton;

然后CustomButton可以使用此组件代替Button：

import React from "react";
import {
  makeStyles,
  createMuiTheme,
  ThemeProvider
} from "@material-ui/core/styles";
import Button from "./CustomButton";
import lime from "@material-ui/core/colors/lime";

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1)
    }
  }
}));

const theme = createMuiTheme({
  palette: {
    tertiary: lime
  }
});
// This is a step that Material-UI automatically does for the standard palette colors.
theme.palette.tertiary = theme.palette.augmentColor(theme.palette.tertiary);

export default function ContainedButtons() {
  const classes = useStyles();

  return (
    <ThemeProvider theme={theme}>
      <div className={classes.root}>
        <Button variant="contained">Default</Button>
        <Button variant="contained" color="primary">
          Primary
        </Button>
        <Button variant="contained" color="secondary">
          Secondary
        </Button>
        <br />
        <Button variant="contained" color="tertiary">
          Tertiary
        </Button>
        <Button color="tertiary">Tertiary text</Button>
        <Button variant="outlined" color="tertiary">
          Tertiary outlined
        </Button>
      </div>
    </ThemeProvider>
  );
}

在 v5 中，不需要自定义按钮。您需要做的就是适当地创建主题：

import React from "react";
import { styled, createTheme, ThemeProvider } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import { lime } from "@material-ui/core/colors";

const defaultTheme = createTheme();
const theme = createTheme({
  palette: {
    // augmentColor is a step that Material-UI automatically does for the standard palette colors.
    tertiary: defaultTheme.palette.augmentColor({
      color: { main: lime[500] },
      name: "tertiary"
    })
  }
});

const StyledDiv = styled("div")(({ theme }) => ({
  "& > *.MuiButton-root": {
    margin: theme.spacing(1)
  }
}));
export default function ContainedButtons() {
  return (
    <ThemeProvider theme={theme}>
      <StyledDiv>
        <Button variant="contained">Default</Button>
        <Button variant="contained" color="primary">
          Primary
        </Button>
        <Button variant="contained" color="secondary">
          Secondary
        </Button>
        <br />
        <Button variant="contained" color="tertiary">
          Tertiary
        </Button>
        <Button color="tertiary">Tertiary text</Button>
        <Button variant="outlined" color="tertiary">
          Tertiary outlined
        </Button>
      </StyledDiv>
    </ThemeProvider>
  );
}

取自材料 UI 的调色板文档，https://material-ui.com/customization/palette/

颜色意图是调色板颜色到应用程序中给定意图的映射。主题公开以下调色板颜色（可在 theme.palette. 下访问）：

主要- 用于表示用户的主要界面元素。它是应用程序屏幕和组件中最常显示的颜色。

次要- 用于表示用户的次要界面元素。它提供了更多的方式来强调和区分您的产品。拥有它是可选的。

错误- 用于表示用户应该知道的界面元素。

警告- 用于表示潜在的危险操作或重要消息。

info - 用于向用户呈现中立且不一定重要的信息。

成功- 用于指示用户触发的操作成功完成。如果您想了解有关颜色的更多信息，可以查看颜色部分。

因此，您可能会考虑重新分配警告/成功/信息/错误按钮中的任何一个。通常我会将错误和警告颜色都保留为红色，因此警告调色板可以自由地为我重新分配。