Unable to install material-ui/core in reactjs project?

Asked
Active3 hr before
Viewed126 times

10 Answers

materialreactjsprojectinstallunable
90%

I've just created a new React app using Create React App. When I went to install Matrial UI, I received the following error message:,Thanks for contributing an answer to Stack Overflow!, Meta Stack Overflow

 Pretag team - issue, fix, solve, resolve
88%

 Pretag team - issue, fix, solve, resolve
72%

We just haven't updated the peer version yet because, well, react 17 was just released.,Technically v4 and v5 should support it. We're running tests with React 17 every day so we're notified once something breaks.,We need to use react@17.0.2 because it is required by Next.js version v11.0.0. Are there any short term plans to support that?

npm ERR!Found: react @17 .0 .1
npm ERR!node_modules / react
npm ERR!react @ "^17.0.1"
from the root project
npm ERR!
   npm ERR!Could not resolve dependency:
   npm ERR!peer react @ "^16.8.0"
from @material - ui / core @4 .11 .0
npm ERR!node_modules / @material - ui / core
npm ERR!@material - ui / core @ "*"
from the root project
load more v
65%

npm i @material-ui/core,Gitgithub.com/mui-org/material-ui,React components for faster and simpler web development. Build your own design system, or start with Material Design.

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

// with yarn
yarn add @material - ui / core
load more v
75%

Install Material-UI, the world's most popular React UI framework.,one for development: https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js,one for production: https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js

To install and save in your package.json dependencies, run:

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

// with yarn
yarn add @material - ui / core
load more v
40%

You can use the migration helper on your project to make this smoother.,[Container] Moved from @material-ui/lab to @material-ui/core.,[Slider] Move from @material-ui/lab to @material-ui/core.

You need to update your package.json to use the latest version of Material-UI.

"dependencies": {
   "@material-ui/core": "^4.0.0"
}

Or run

npm install @material - ui / core

or

yarn add @material - ui / core

If you were previously using @material-ui/styles with v3 you need to update your package.json to use the latest version of Material-UI Styles.

"dependencies": {
   "@material-ui/styles": "^4.0.0"
}

Or run

npm install @material - ui / styles

or

yarn add @material - ui / styles

It matches the emotion API and the styled-components API.

-
const DeepChild = withTheme()(DeepChildRaw); +
const DeepChild = withTheme(DeepChildRaw);

Rename convertHexToRGB to hexToRgb.

-
import {
   convertHexToRgb
} from '@material-ui/core/styles/colorManipulator'; +
import {
   hexToRgb
} from '@material-ui/core/styles';

Scope the keyframes API. You should apply the following changes in your codebase. It helps isolating the animation logic:

  rippleVisible: {
        opacity: 0.3,
        -animation: 'mui-ripple-enter 100ms cubic-bezier(0.4, 0, 0.2, 1)',
        +animation: '$mui-ripple-enter 100ms cubic-bezier(0.4, 0, 0.2, 1)',
     },
     '@keyframes mui-ripple-enter': {
        '0%': {
           opacity: 0.1,
        },
        '100%': {
           opacity: 0.3,
        },
     },

The theme.palette.augmentColor() method no longer performs a side effect on its input color. To use it correctly, you have to use the returned value.

-
const background = {
   main: color
}; -
theme.palette.augmentColor(background); +
const background = theme.palette.augmentColor({
   main: color
});

console.log({
   background
});

You can safely remove the next variant from the theme creation:

typography: {
   -useNextVariants: true,
},

theme.spacing.unit usage is deprecated, you can use the new API:

label: {
   [theme.breakpoints.up('sm')]: {
      -paddingTop: theme.spacing.unit * 12,
      +paddingTop: theme.spacing(12),
   },
}

[Grid] In order to support arbitrary spacing values and to remove the need to mentally count by 8, we are changing the spacing API:

  /**
   * Defines the space between the type `item` component.
   * It can only be used on a type `container` component.
   */
  -spacing: PropTypes.oneOf([0, 8, 16, 24, 32, 40]),
     +spacing: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]),

[Container] Moved from @material-ui/lab to @material-ui/core.

-
import Container from '@material-ui/lab/Container'; +
import Container from '@material-ui/core/Container';

Normalized value prop type for input components to use unknown. This affects InputBase, NativeSelect, OutlinedInput, Radio, RadioGroup, Select, SelectInput, Switch, TextArea, and TextField.

function MySelect({ children }) {
- const handleChange = (event: any, value: string) => {
+ const handleChange = (event: any, value: unknown) => {
    // handle value
  };

  return <Select onChange={handleChange}>{children}</Select>
}

[Button] Remove the deprecated button variants (flat, raised and fab):

-<Button variant="raised" />
+<Button variant="contained" />
-<Button variant="flat" />
+<Button variant="text" />
-import Button from '@material-ui/core/Button';
-<Button variant="fab" />
+import Fab from '@material-ui/core/Fab';
+
<Fab />
-import Button from '@material-ui/core/Button';
-<Button variant="extendedFab" />
+import Fab from '@material-ui/core/Fab';
+
<Fab variant="extended" />

[Divider] Remove the deprecated inset prop.

-
<Divider inset />
+
<Divider variant="inset" />

[Paper] Reduce the default elevation. Change the default Paper elevation to match the Card and the Expansion Panel:

-<Paper />
+<Paper elevation={2} />

[Slider] Move from @material-ui/lab to @material-ui/core.

-
import Slider from '@material-ui/lab/Slider' +
import Slider from '@material-ui/core/Slider'

[Switch] Refactor the implementation to make it easier to override the styles. Rename the class names to match the specification wording:

-icon
   -
   bar +
   thumb +
   track

[SvgIcon] Rename nativeColor -> htmlColor. React solved the same problem with the for HTML attribute, they have decided to call the prop htmlFor. This change follows the same reasoning.

-
<AddIcon nativeColor="#fff" />
+
<AddIcon htmlColor="#fff" />

[Tabs] Remove deprecated fullWidth and scrollable props:

-
<Tabs fullWidth scrollable />
+
<Tabs variant="scrollable" />

[TableCell] Remove the deprecated numeric property:

-<TableCell numeric>{row.calories}</TableCell>
+<TableCell align="right">{row.calories}</TableCell>

[TableCell] Move the dense mode to a different property:

-
<TableCell padding="dense" />
+
<TableCell size="small" />

[InputLabel] You should be able to override all the styles of the FormLabel component using the CSS API of the InputLabel component. The FormLabelClasses property has been removed.

<InputLabel
- FormLabelClasses={{ asterisk: 'bar' }}
+ classes={{ asterisk: 'bar' }}
>
  Foo
</InputLabel>

[InputBase] Change the default box sizing model. It uses the following CSS now:

box - sizing: border - box;

[Typography] Rename the headlineMapping property to variantMapping to better align with its purpose.

-<Typography headlineMapping={headlineMapping}>
+<Typography variantMapping={variantMapping}>

This change eases the use of Material-UI with a CDN:

const {
   Button,
   TextField,
   -
} = window['material-ui']; +
} = MaterialUI;
load more v
22%

 Pretag team - issue, fix, solve, resolve
60%

 Pretag team - issue, fix, solve, resolve
48%

unable to install material-ui/core in reactjs project? , unable to install material-ui/core in reactjs project? , formik-material-ui

 Pretag team - issue, fix, solve, resolve
23%

Technically v4 and v5 should support it. We’re running tests with React 17 every day so we’re notified once something breaks.,Does v5 already support it?,Same disclaimer applies as in my post above: Material UI does not officially support React v17 yet, so use with caution.

Error fron console

npm ERR!Found: react @17 .0 .1
npm ERR!node_modules / react
npm ERR!react @ "^17.0.1"
from the root project
npm ERR!
   npm ERR!Could not resolve dependency:
   npm ERR!peer react @ "^16.8.0"
from @material - ui / core @4 .11 .0
npm ERR!node_modules / @material - ui / core
npm ERR!@material - ui / core @ "*"
from the root project
load more v

Other "material-reactjs" queries related to "Unable to install material-ui/core in reactjs project?"