新增答案

在最新版本的Material UI中，createMuiTheme现在已弃用。因此，我们应该使用createTheme

import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createTheme } from '@material-ui/core/styles';
import Root from './Root';

// use default theme
// const theme = createTheme();

// Or Create your Own theme:
const theme = createTheme({
  palette: {
    secondary: {
      main: '#E33E7F'
    }
  }
});
    
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <Root />
    </MuiThemeProvider>
  );
}
    
render(<App />, document.querySelector('#app'));

旧答案

https://material-ui.com/customization/themes/：

import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Root from './Root';

// use default theme
// const theme = createMuiTheme();

// Or Create your Own theme:
const theme = createMuiTheme({
  palette: {
    secondary: {
      main: '#E33E7F'
    }
  }
});
    
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <Root />
    </MuiThemeProvider>
  );
}
    
render(<App />, document.querySelector('#app'));

我注意到的与文档的两个不同之处是MuiThemeProvider的 prop 名称：

<MuiThemeProvider muiTheme={muiTheme}>
   <AppBar title="My AppBar" />
</MuiThemeProvider>

函数不是createMuiTheme，而是getMuiTheme：

import getMuiTheme from 'material-ui/styles/getMuiTheme';

更新：

如果你从包中打开光主题，他们没有使用主或次，也许你应该这样尝试？

你应该按照文档建议使用v1-beta。我自己也有这些问题，意识到我使用的是过时版本的MUI。
npm install material-ui@next
导入：

import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';

创建主题：

const theme = createMuiTheme({
    palette: {
        secondary: {
            main: '#d32f2f'
        }
      },
});

将其应用到您的按钮：

<MuiThemeProvider theme={theme}>
   <Button
     onClick={this.someMethod} 
     variant="raised"
     color="secondary" 
   </Button>
</MuiThemeProvider>

通常，如果你遇到任何关于MUI的import问题，那么几乎每次都是版本问题。

如果要使用自定义颜色，请将其放在对象的main属性中。MUI将使用该颜色来计算除主值之外的dark、light和contrastText值。

• dark、light：main颜色的较暗和较亮版本。
• contrastText：如果背景颜色为main颜色，则为文本的颜色。

下面的例子：

const theme = createTheme({
  palette: {
    primary: {
      main: '#ff0000', // very red
    },
    secondary: {
      main: '#00fff0', // very cyan
    },
  },
});

在主对象和次对象中生成以下颜色特性：

const theme = useTheme();
const { main, dark, light, contrastText } = theme.palette.primary;
// same with secondary
// const { main, dark, light, contrastText } = theme.palette.secondary;

您还可以通过将color对象直接传递给primary或secondary属性来使用MUI颜色。这一次，MUI使用属性500（例如amber[500]）来计算其他3种颜色。代码如下：

import { amber, deepPurple } from '@mui/material/colors';

const theme = createTheme({
  palette: {
    primary: amber,
    secondary: deepPurple,
  },
});

在主对象和次对象中生成以下颜色属性，请注意，由于传递了整个颜色，因此从50到A700的所有其他着色也可用作一个小的副作用：

现场演示

相关解答

• How to add custom MUI palette colors
• Material-UI: how to access all palette shades inside component

https://mui.com/material-ui/customization/theming/中描述了MUI Material v5的新API。

import * as React from 'react';
import { red } from '@mui/material/colors';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: red[500],
    },
  },
});

const App = () => 
  <ThemeProvider theme={theme}>...</ThemeProvider>;