web-dev-qa-db-ja.com

material-uiの二次色と一次色を変更する

エラーの種類などを見つけました。まだわかりません。反応アプリがあり、UIとしてmaterial-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からインポートすることになっていますが、実際にはこのフォルダがまったくありません！

[email protected]を使用していました。このパッケージをv20..に更新しましたが、そのようなフォルダはありません...

これを修正する方法を知っていますか？

material-designmaterial-ui
13
Den Gas

私が気付いたドキュメントとの2つの違いは、MuiThemeProviderのプロップの名前です。

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

そして、関数はcreateMuiThemeではなく、getMuiThemeです。

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

更新：

パッケージからライトテーマを開くと、プライマリまたはセカンダリが使用されていません。

enter image description here

1
Eudes
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/

1
Alan

ドキュメントが推奨する 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の問題が発生した場合、それはほとんど常にバージョンの問題です。

1
Claim0013