I found that the Official Website of Material UI is using #material-ui and #mui.
But I find that If I use #material-ui or #mui Textfield, the UI doesn't works and the problems are mentioned below
React - Material label not in right position in Textfield
If you search Material UI in google, and go to https://mui.com/, it tells you to npm install #mui/material. But few weeks ago, I am using npm install #material-ui
If I have both #material-ui and #mui in my package.json, and I include both script and stylesheet in index.html, will there be any conflicts which mess up the UI
Update 1
In #mui CodeSandbox,
If you try Textfield with select prop, when you open the select, overflow: hidden will be added in body.
https://codesandbox.io/s/selecttextfields-material-demo-forked-z6b9f?file=/demo.js
In my project,
overflow: hidden; padding: 15px is added in body, but I checked I've done nothing about this!
material-ui version 1-4 are available on NPM under #material/core and versions >4 are available under #mui/material. Same library, but they changed the name in version 5.
Since Sep 16, 2021 Material-UI changed his name to MUI to differentiate the company from Google. They say on the blog:
We are breaking the strong association with Material Design as we have
seen too many people confusing Material-UI with Google, or as a
synonym of Material Design.
Blog post here: https://mui.com/blog/material-ui-is-now-mui/
From version 5 the packages stored under #mui as you can found in documentation and you must use npm install #mui/material instead of #material-ui/core.
Material ui has upgraded to V5 as per the recent tweet :https://twitter.com/MaterialUI/status/1438518915236126723?s=20
Related
enter image description hereWhen I paste npm install #material-ui/core in my root directory, the following is displayed:
I was trying to improve the UI of my app using material-UI. It's my first time using material-UI.
Simply clone MUI official example
https://github.com/mui/material-ui/tree/master/examples/create-react-app
or you can check this repo configurations and installed libararies
How to use nestedMenu imported form "material-ui-nested-menu-item" which is developed by "material-ui" lib (old version), with the its new version "#mui" without installing both packages
I made a version for Mui 5. Less headache than trying to deal with the dependencies:
Material UI Nested Menu Item v5 on NPM
Material UI Nested Menu Item v5 Demo
enter image description here
I was working on the "#material-ui/core": "^4.12.3" version, and now the version is changed. I am looking the way for :
import { GridOverlay, DataGrid } from '#mui/x-data-grid';
But it is not working.
can anyone help me in setting up both the version and documentation for the older version so that I go with both version in my application.
TL;DR
Step 1.
// with npm
npm install #mui/material #emotion/react #emotion/styled
// with yarn
yarn add #mui/material #emotion/react #emotion/styled
Step 2.
// with npm
npm install #mui/x-data-grid
// with yarn
yarn add #mui/x-data-grid
Step 3.
import { DataGrid } from '#mui/x-data-grid'
Long Text
Our company also encountered the same problem when migrating, and finally solved it perfectly.
The reason for the above error is because #mui/x-data-grid is dependent on MUI v5, so you have to install it, or you can be used with MUI v4 with some additional steps.
This is a reference guide for upgrading your site from MUI X v4 to v5. MUI X v5 is fully compatible with MUI Core (includes Material UI) v5 and can be used with MUI Core v4 with some additional steps. Most breaking changes are renaming of CSS classes or variables to improve the consistency of the grid.
Refer to MUI doc
You may be wondering, but what should I do if I use mui v4 now?
According to our actual experience and the information provided by the official Material, it is no problem to have the v4 package and the v5 package at the same time, so you can install the MUI v5 first and let #mui/ x-data-grid can be used, waiting for the spare time to migrate the v4 components to the v5 usage.
We strongly recommend you migrate MUI Core to v5 when using MUI X v5. However, this might not be possible, depending on the complexity of the application. The alternative is to install MUI Core v5 and configure it to keep MUI Core v4 running alongside.
Refer to MUI doc
Module not found: Can't resolve '#mui/x-data-grid'
Means you don't have this module installed
If you find this error for any other modules meaning is the same you have to install that specific module
npm install #mui/x-data-grid
npm i #mui/x-data-grid install this one first
Even if you have installed the dependency #mui/x-data-grid VS Code may nag you with this error, the solution is to restart the VS Code.
I had migrate my version of material-ui v4 to v5.0.0-alpha.32 and notice that have some new StyleEngineProvider in order to run the old engine (jss) in the new version. But whe i run yarn build, it generated an empty styled on the header:
Can anyone help me with this issue?
I noticed that i upgrated only the #material-ui/core and forgot to upgrade the subpackages like #material-ui/styled and #material-ui/icons
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:
Use Create-React-App with Material UI - This answer says to use npm install --save material-ui but because it is 2 years old, I think it may be out of date.
Difference between Material-Ui and Material-Ui-Next
How to install Material-UI Docs WITHOUT installing material-ui?
#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):
#material-ui/core
#material-ui/icons
#material-ui/styles
#material-ui/system
#material-ui/lab
#material-ui/utils
#material-ui/types
#material-ui/docs
#material-ui/codemod
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):
#mui/material
This is the equivalent of #material-ui/core
#mui/core
This is the NOT the equivalent of #material-ui/core. #mui/core is a new package for unstyled (no Material-Design CSS applied) versions of the components.
#mui/icons-material
#mui/styles
This is for supporting the withStyles and makeStyles JSS-backed styling APIs and is not recommended for use in new projects.
#mui/system
#mui/lab
#mui/utils
#mui/types
#mui/docs
#mui/codemod
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