I have a project having react version ^15.4.1, which version of material UI can I use in the same project? I tried installing latest version of #material-ui/core and upgrading the react version, but its affecting so many other dependencies, is there any way to import #material-ui/core in the same react version?
Related
I am trying to integrate React-bootstrap into my SPFX project. I use the following versions.
React: 16.13.1
react-bootstrap: 2.4.0
SPFx: 1.14
When I try to import any react-bootstrap module into my tsx file, something like:
import Alert from 'react-bootstrap/Alert';
I get the error Cannot find module 'react/jsx-runtime'
Many forums tell me to upgrade my react version, but I cannot do so in my case, as latest version of SPFX (1.14) supports React 16.13.1, and not higher version.
Any solution to overcome the above issue would be very helpful
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
I started building an react app using the new v5 alpha material-ui
According to their documentation 'The data grid components are supporting v5 and v4'.
So I installed the X-grid and when I import the X-grid I get this error:
./node_modules/#material-ui/x-grid/dist/index-esm.js
Module not found: Can't resolve '#material-ui/styles' in 'C:\Users\remusp\Desktop\React\material\node_modules#material-ui\x-grid\dist'
Does anyone know how to make this work together?
so you can install material/styles
npm install #material-ui/styles
sometimes the packages comes splited, so if you will use all material-ui install all lib
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