Question

我发现了一种错误或某种东西......但仍然不知道。我有一个反应应用程序，我使用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

您应该使用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 2

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 3

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

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

该功能不是createMuiTheme，而是getMuiTheme：

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

<强>更新

如果您打开包装中的灯光主题，他们不使用主要或次要，也许您应该尝试这样？

更改materual-ui中的二级和原色

3 个答案: