找不到模块:无法解析'material-ui / styles / colors'

时间:2018-04-10 10:24:22

标签: javascript reactjs material-ui

我有以下代码,但未编译:

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'  

我做错了什么?

2 个答案:

答案 0 :(得分:9)

在这里的评论中移动讨论:

确保安装了材料-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 secondaryerror接受颜色对象或“调色板意图”,它是一个如下所示的对象:

interface PaletteIntention {
  light?: string;
  main: string;
  dark?: string;
  contrastText?: string;
};

唯一需要的密钥是main。其余部分是根据main的值自动计算的,如果没有提供的话。

参考:

The docs have a detail section on themes which explains all of this in detail

答案 1 :(得分:0)

试试这个

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';