9

Just starting (again) with material UI and react. There are two packages material-ui and @material-ui, which is the best starting point (latest) as of 2019-07 timeframe?

I think it is npm install @material-ui/core based on ... https://material-ui.com/getting-started/installation/. The GIT repo is at https://github.com/mui-org/material-ui

Simple question, hopefully simple answer.

Other questions I looked at:

PatS
  • 8,833
  • 12
  • 57
  • 100
  • As over Material UI version 5, the install uses @mui. So `npm install @mui/material @mui/styled-engine-sc styled-components` is shown on this page https://mui.com/getting-started/installation/#npm – PatS Oct 29 '21 at 21:09

2 Answers2

13

@material-ui/core is the correct one to use for v4. For v5, the equivalent package is @mui/material.

If you go to https://www.npmjs.com/package/material-ui, you'll see that material-ui is deprecated. The last stable version in the material-ui package was 0.20.2. For the 1.0 release it moved to @material-ui/core and for the stable release of v5 it moved to @mui/material.

The @material-ui scope (for v4) is used for the following packages that are all managed within the monorepo you referenced (https://github.com/mui-org/material-ui/tree/v4.12.3/packages):

Similarly, the @mui scope (for v5) is used for the similar set of packages supported for v5 (https://github.com/mui-org/material-ui/tree/master/packages):

Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198
  • 1
    The code I was updating was using v0.x so I found this link helpful... https://material-ui.com/guides/migration-v0x/ – PatS Jul 03 '19 at 19:01
  • And just FYI... If you try just changing `npm install material-ui` with `npm install @material-ui` you'll get an error `Invalid tag name @material-ui: Tags may not have any characters that encodeURIComponent encodes.` The correct usage `npm install @material-ui/core` works without an error! – PatS Jul 03 '19 at 19:04
  • [Material-UI is now MUI!](https://mui.com/blog/material-ui-is-now-mui/) – x-yuri Oct 18 '21 at 03:49
  • @x-yuri I've updated my answer to include the v5 `@mui` packages. – Ryan Cogswell Oct 18 '21 at 20:27
3

The @ scope indicates package ownership

The main advantage of scopes I've seen so far is that each scope is controlled by npm account of an organization / user, much like GitHub usernames / organization names.

This way, it makes it easy to determine if the package you are looking at belongs to an organization you trust, or if it is a third party tool.

For example, if you see:

@material-ui

then you know that it comes from the material-ui team and can be trusted.

On the other hand, the same could not be said about:

material-ui

For more https://docs.npmjs.com/about-scopes