在Materual-UI中更改辅助颜色和原色

Question

我发现了某种错误或其他问题..仍然不知道。我有一个React应用，material-ui可用作UI。例如，当您导入按钮时，您可以使用primary={true}或更改其颜色secondary={true}。但是，我决定改变primary和secondary颜色。我发现我可以这样做：

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

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

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

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

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

我正在使用material-ui@0.19.4。我将此软件包更新为，v20..并且仍然没有此类文件夹...

怎么知道如何解决这个问题？

Answer 1

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'));

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

Answer 2

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

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

并且函数不是 createMuiTheme 而是 getMuiTheme：

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

更新：

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

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>

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

Answer 4

如果您想使用自定义颜色，请将其放入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：如何访问组件内的所有调色板色调