新答案

在最新版本的 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 的props名称：

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

并且函数不是 createMuiTheme 而是 getMuiTheme：

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

更新：

如果您从包装中打开 light 主题，他们没有使用主要或次要，也许您应该尝试这样做？

您应该按照文档的建议使用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>

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

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

• 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;

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

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

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

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

现场演示

相关答案

• 如何添加自定义 MUI 调色板颜色
• Material-UI：如何访问组件内的所有调色板阴影