我在这个线程中使用 Brendans 的答案提出了这个解决方案。希望它会帮助处于类似情况的人。

import React, { Component } from 'react'
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'
import Button from 'material-ui/Button'
import { red, blue } from 'material-ui/colors'

const redTheme = createMuiTheme({ palette: { primary: red } })
const blueTheme = createMuiTheme({ palette: { primary: blue } })

class Buttons extends Component {
  render = () => (
    <div className="ledger-actions-module">
      <MuiThemeProvider theme={redTheme}>
        <Button color="primary" variant="raised">
          Delete
        </Button>
      </MuiThemeProvider>
      <MuiThemeProvider theme={blueTheme}>
        <Button color="primary" variant="raised">
          Update
        </Button>
      </MuiThemeProvider>
    </div>
  )
}

你可以试试这个

<Button
    style={{
        borderRadius: 35,
        backgroundColor: "#21b6ae",
        padding: "18px 36px",
        fontSize: "18px"
    }}
    variant="contained"
    >
    Submit
</Button>

Bagelfp 的回答有错误，还有其他一些需要考虑的事情；

首先，“error”不是 material-ui@next v1 的Button 组件中支持的颜色主题。color prop只接受“default”、“inherit”、“primary”和“secondary”。

这是迄今为止我发现的最简单的方法。首先，选择您最常用的两种主题颜色并将它们放在应用程序的根目录中。

import React from 'react';
import { Component } from './Component.js'
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';

const theme = createMuiTheme({
  palette: {
    primary: 'purple',
    secondary: 'green',
    error: 'red',
  },
});

export class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <Component />
        ...
      </MuiThemeProvider>
    );
  }
}

然后在你的组件中，选择你想要的颜色的主题；

import React from 'react';
import Button from 'material-ui/Button';

export const Component = (props) => (
  <div>
    <Button variant="fab" color="primary">
      I am purple, click me!
    </Button>
  </div>
)

如果您需要第三种和第四种颜色，您可以使用新的调色板导出 Component.js，就像您在 App.js 中所做的那样。

这是我发现的唯一可以保留变暗悬停效果的解决方案（没有一个官方覆盖示例保留了悬停功能）。我真的希望我能找到一种方法，在调用 Button 时简单地放入新的主题颜色，但目前这是最简单的方法。

编辑：我新的首选方法是使用 styled-components 和 material-ui buttonbase 创建一个 CustomButton 组件。我还将 styled-components 主题提供程序与我的 MuiThemeProvider 一起放在我的应用程序的根目录中。这使我可以轻松访问所有样式组件中的其他主题颜色，而无需导入和删除更多 ThemeProvider。在我的 CustomButton 的情况下，我只是给它一个themeprops，它直接传递给 .css 文件中的 css styled(ButtonBase)。有关更多信息，请参阅样式组件文档。

试试这个：

import * as React from 'react';
import Button, { ButtonProps } from "@material-ui/core/Button";
import { Theme } from '@material-ui/core';
import { withStyles } from '@material-ui/styles';

const styles: (theme: Theme) => any = (theme) => {
    return {
        root:{
            backgroundColor: theme.palette.error.main,
            color: theme.palette.error.contrastText,
            "&:hover":{
                backgroundColor: theme.palette.error.dark
            },
            "&:disabled":{
                backgroundColor: theme.palette.error.light
            }
        }
    };
};

export const ButtonContainedError = withStyles(styles)((props: ButtonProps) => {
    const { className, ...rest } = props;
    const classes = props.classes||{};
    return <Button {...props} className={`${className} ${classes.root}`} variant="contained" />
});

现在你有一个 ButtonContainedError 可以在任何地方使用。

并且与你的主题一致。

您可以使用theme.palette.getContrastText()根据背景颜色值计算正确的文本颜色。

import { Button, makeStyles } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  deleteButton: {
    // to make a red delete button
    color: theme.palette.getContrastText(theme.palette.error.main),
    background: theme.palette.error.main,
  }
}));

export const DeleteButton = () => {
  const classes = useStyles();
  return (
    <Button className={classes.deleteButton}>Delete</Button>
  );
}