Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't resolve 'material-ui/Button'

I have an existing react project to which i want to add material-ui library . So i have used the command npm install --save material-ui. But when i run it ,it shows error .

Here is the error details -

Can't resolve 'material-ui/Button' in 'C:\Users{user}\demo2\src'

Here is the link for repository

https://github.com/mui-org/material-ui

<Button variant="raised" color="primary">
  Hello World
</Button>
like image 258
pKay Avatar asked Feb 14 '18 14:02

pKay


3 Answers

For others who face the same issue in a future:

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core
like image 90
Yrineu Rodrigues Avatar answered Oct 11 '22 12:10

Yrineu Rodrigues


The Button component that you are trying to use from material-ui is imported as Button from v1 onwards which is still in beta stage. To use it you need to install it like

npm install --save material-ui@next

and then you can import Button from material-ui as

import Button from 'material-ui/Button';

Check its usage as mentioned in readme of the git repository

In the current stable version, you have option of using FlatButton, RaisedButton, FloatingActionButton and IconButton

like image 34
Shubham Khatri Avatar answered Oct 11 '22 11:10

Shubham Khatri


@Shubham Khatri's answer should be the accepted answer IMHO.

However, in order to use the Material UI library you installed, you should use it as in the example found in the MUI documentation:

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const style = {
  margin: 12,
};

const RaisedButtonExampleSimple = () => (
  <div>
    <RaisedButton label="Default" style={style} />
    <RaisedButton label="Primary" primary={true} style={style} />
    <RaisedButton label="Secondary" secondary={true} style={style} />
    <RaisedButton label="Disabled" disabled={true} style={style} />
    <br />
    <br />
    <RaisedButton label="Full width" fullWidth={true} />
  </div>
);

export default RaisedButtonExampleSimple;

Keep in mind that v1.x versions of MUI are not backward compatible with v0.x versions. MUI strongly recommends using v1.x in new projects even though it's in beta, as the amount of work needed to upgrade from v0.x to v1.x is so much more than v1.x to v1.y (been there, done that, and I agree)

like image 2
dauffret Avatar answered Oct 11 '22 12:10

dauffret