Source:  Twitter logo

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>

For others who face the same issue in a future:

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

// with yarn
yarn add @material-ui/core
17 users liked answer #0dislike answer #017
Yrineu Rodrigues profile pic
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

8 users liked answer #1dislike answer #18
Shubham Khatri profile pic
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)

2 users liked answer #2dislike answer #22
dauffret profile pic
dauffret

The following code will solve the issue.

Install the npm packages:

npm install @mui/material @emotion/react @emotion/styled

Import using :

import Button from '@mui/material/Button';
0 users liked answer #3dislike answer #30
karthik.engineering profile pic
karthik.engineering

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).