在 MUI 中更改原色和二次色

Question

我有一个使用 MUI 的反应应用程序。导入按钮时，可以使用primary={true} 或secondary={true} 设置其样式。我想更改primary 和secondary 颜色。我发现我可以这样做：

const theme = createMuiTheme({
  palette: {
    primary: '#00bcd4',
    secondary: '#ff4081'
  }
});

然后在这里我可以使用它：

<MuiThemeProvider theme={theme}>
  <App/>
</MuiThemeProvider>

但我收到一个错误：createMuiTheme is not a function...

我进入MUI包发现没有这样的文件，当我导入createMuiTheme时，我得到undefined。它应该是从material-ui/styles/theme 导入的，但它实际上根本没有这个文件夹！

我使用的是material-ui@0.19.4。我将这个包更新为v20，但仍然没有这样的文件夹。

Answer 1

如果您想使用自定义颜色，请将其放在对象的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;

您还可以通过将颜色对象直接传递给primary 或secondary 属性来使用MUI colors。这一次，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

Answer 2

新答案

使用最新版本的 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'));

Answer 3

您应该按照文档的建议使用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 问题，那么几乎每次都是版本问题。

Answer 4

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

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

而且函数不是createMuiTheme而是getMuiTheme：

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

更新：

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