[英]Module not found: Can't resolve 'material-ui/styles/colors'
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?我究竟做错了什么?
Moving the discussion in the comments here:将评论中的讨论移至此处:
Make sure you install the next
version of material-ui:确保安装
next
版本的 material-ui:
npm install material-ui@next
This import statement is incorrect:这个导入语句是不正确的:
import { red400 } from 'material-ui/styles/colors'
It needs to be like:它需要像:
import red from 'material-ui/colors/red';
Here, red
is what the docs call a 'color object'.在这里,
red
是文档所说的“颜色对象”。 You can then use it in to create your theme object like this:然后您可以使用它来创建您的主题对象,如下所示:
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 primary
secondary
and error
accept either a color object OR a 'palette intention' which is an object which looks like this:在上面的代码中,键
primary
secondary
和error
接受颜色对象或“调色板意图”,这是一个如下所示的对象:
interface PaletteIntention {
light?: string;
main: string;
dark?: string;
contrastText?: string;
};
The only required key there is main
.唯一需要的键是
main
。 The rest are auto computed from the value of main
if it's not provided.如果未提供,其余的将根据
main
的值自动计算。
Reference:参考:
The docs have a detail section on themes which explains all of this in detail . 文档有一个关于主题的详细部分,详细解释了所有这些。
试试这个
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
In my case i downloaded a template Material Dashboard Pro and was running npm install
to install the dependencies but it was showing the same error so i fixed it with在我的情况下,我下载了一个模板 Material Dashboard Pro 并运行
npm install
来安装依赖项,但它显示了相同的错误,所以我修复了它
npm install material-ui@next --force
by adding --force
flag solved my issue.通过添加
--force
标志解决了我的问题。 posting this because it may be helpful for someone.发布此内容是因为它可能对某人有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.