Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between @material-ui and @mui

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. enter image description here

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! enter image description here

like image 644
CCCC Avatar asked Sep 17 '21 07:09

CCCC


People also ask

Is material UI and materialize the same?

Materialize: A modern responsive front-end framework based on Material Design. A CSS Framework based on material design; Material-UI: React components for faster and easier web development. Build your own design system, or start with Material Design.

Is MUI based on Material Design?

Material UI is a comprehensive library of components that features our implementation of Google's Material Design. @mui/system is included as dependency, meaning you don't need to install or import it separately—you can import its components and functions directly from @mui/material .

What is the difference between Mui and UI?

@material-ui provides components that follow Google's Material Design system. @mui provides components that are "unstyled", These can be used to implement a custom design system that is not based on Material Design.

Which is better material UI or ant design?

According to the StackShare community, Material-UI has a broader approval, being mentioned in 67 company stacks & 77 developers stacks; compared to Ant Design, which is listed in 22 company stacks and 33 developer stacks.


3 Answers

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.

like image 167
GabeRAMturn Avatar answered Oct 16 '22 18:10

GabeRAMturn


Material ui has upgraded to V5 as per the recent tweet :https://twitter.com/MaterialUI/status/1438518915236126723?s=20

enter image description here

like image 8
monikapatelIT Avatar answered Oct 16 '22 19:10

monikapatelIT


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.

like image 7
kepes Avatar answered Oct 16 '22 20:10

kepes