javascript 找不到模块：无法解析“material-ui/styles/colors”

Module not found: Can't resolve 'material-ui/styles/colors'

提问by zero_coding

I have the following code, that does not compiled:

我有以下未编译的代码：

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;

It says:

它说：

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'  

What am I doing wrong?

我究竟做错了什么？

回答by Chirag Ravindra

Moving the discussion in the comments here:

将评论中的讨论移至此处：

Make sure you install the nextversion of material-ui:

确保你安装了nextmaterial-ui的版本：

npm install material-ui@next

npm install material-ui@next

This import statement is incorrect:

这个导入语句是不正确的：

import { red400 } from 'material-ui/styles/colors'

import { red400 } from 'material-ui/styles/colors'

It needs to be like:

它需要像：

import red from 'material-ui/colors/red';

import red from 'material-ui/colors/red';

Here, redis what the docs call a 'color object'. You can then use it in to create your theme object like this:

这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

  },
});

In the above code, the keys primarysecondaryand erroraccept either a color object OR a 'palette intention' which is an object which looks like this:

在上面的代码中，键primarysecondary和error接受颜色对象或“调色板意图”，这是一个如下所示的对象：

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

The only required key there is main. The rest are auto computed from the value of mainif it's not provided.

唯一需要的键是main。main如果未提供，其余的将根据 的值自动计算。

Reference:

参考：

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

文档有一个关于主题的详细部分，详细解释了所有这些。