コンパイルされない次のコードがあります:
import React from 'react';
import { AppBar, Toolbar } from 'material-ui';
import { Typography } from 'material-ui';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import {cyan, red} from 'material-ui/colors';
import { red400 } from 'material-ui/styles/colors';
const theme = createMuiTheme({
palette: {
primary: red400,
secondary: cyan,
},
});
const View = (props) => (
<MuiThemeProvider theme={theme}>
<AppBar position="static">
<Toolbar>
<Typography variant="title">
{props.title}
</Typography>
</Toolbar>
</AppBar>
</MuiThemeProvider>
);
export default View;
それは言います:
Failed to compile
./src/Dashboard/AppBar/Views/View.js
Module not found: Can't resolve 'material-ui/styles/colors' in '/home/developer/Desktop/react-reason/example/src/Dashboard/AppBar/Views'
私は何を間違えていますか?
コメントの議論をここに移動します:
Material_uiのnext
バージョンをインストールしてください:
npm install material-ui@next
このインポート文は正しくありません:
import { red400 } from 'material-ui/styles/colors'
次のようにする必要があります。
import red from 'material-ui/colors/red';
ここで、red
はドキュメントが「カラーオブジェクト」と呼ぶものです。次に、それを使用して、次のようにテーマオブジェクトを作成できます。
const theme = createMuiTheme({
palette: {
primary: {
main: red[500], //OR red['A400'] for the accent range
contrastText: '#fff', // The text color to use
// You can also specify light, dark variants to use (it's autocomputed otherwise)
}
//You can also just assign the color object if the defaults work for you
secondary: red,
error: red
//tonalOffset
//contrastThreshold
},
});
上記のコードでは、キーprimary
secondary
およびerror
は、カラーオブジェクトOR a'palettetention 'であるオブジェクトを受け入れます次のようになります。
interface PaletteIntention {
light?: string;
main: string;
dark?: string;
contrastText?: string;
};
唯一必要なキーはmain
です。残りはmain
の値が提供されない場合、その値から自動的に計算されます。
参照: