Is it possible to use Material UI v1 with TypeScript?
I installed it to project using npm install material-ui#next --save and got a lot of error messages like
"TS2694: Namespace 'React' has no exported member
'TableHTMLAttributes'."
Probably, it is a problem with data types. Is there any solution?
Related
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 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
After having installed my material-ui for my react project, but when it comes to use it always bring up an error telling me that
'Module not found'
./src/Components/LatestPost.jsModule not found: Can't resolve#material-ui/lab/Skeleton' in 'C:\Users\Zinox\super-surf\src\Components'
You would have only installed #material-ui/core package which would not include the experimental features you are looking for and hence you are getting the error Module not found: Can't resolve '#material-ui/lab/Skeleton'
To use experimental features of Material UI like Skeleton, Rating, Speed Dial and so on you need to also install the Material UI Lab package,
npm install #material-ui/lab
Note that this is needed in addition to the #material-ui/core package that you installed earlier with npm install #material-ui/core
After installing the above package you could import it as,
import Skeleton from '#material-ui/lab/Skeleton';
in your React Component and use it as desired.
you should add two packages into the app first is
yAR i #material-ui/lab #material-ui/core
Stumbled upon the same issue. Skeleton doesn't seem to be contained in the latest package version (4.0.0-alpha.22) at the moment. But it is on their source folder, which is odd.
Maybe you open an issue at their GitHub.
EDIT:
I did: https://github.com/mui-org/material-ui/issues/16919
Module not found: Can't resolve '#material-ui/lab/Skeleton'
If you want to use Skeleton, Rating, Speed Dial, and so on you need to also install the Material UI Lab package.
npm install #material-ui/lab
or
yarn add #material-ui/lab
Link here.
enter link description here
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
I noticed my react typings dont seem to be the right version, ie #types/react (15.0.35) but using react (15.6.1) in my project so I'm trying to update the typings. I tried:
typings install react#15.6.1
but got the err: Unable to find 'react' ('npm') in the registry
I'd like to update the typings to the version of react that I'm using (15.6.1) not to the latest typings, and I don't really want to update my project to the latest version of react.
Please stop using typings it's deprecated https://github.com/typings/typings as you can see in the github project.
Please use #types scope...
npm install --save #types/react#15.6
If you have problems using this approach please show your tsconfig.json