How to install Material UI v5
Materia UI is an open-source React UI library released in 2014. It consists of predefined components that can easily be used in the React applications. The library implements Google’s Material Design. Material UI components are self-supporting and only inject the styles they need to display. The version 5 for Material UI was released in 2021. In this Answer, we will see how we can install Material UI v5 in the React application.
Installation
To use Material UI in the React application, we need to run one of the following commands in the React project directory's terminal:
Using npm:npm install @mui/material @emotion/react @emotion/styledUsing yarn:yarn add @mui/material @emotion/react @emotion/styled
Further, we need to install Material UI icons in the React app. We can run the following commands to do so.
Using npm:npm install @mui/icons-materialUsing yarn:yarn add @mui/icons-material
Material UI uses Roboto font for its texts. Therefore, we can run the following command to install the font.
Using npm:npm install @fontsource/robotoUsing yarn:yarn add @fontsource/roboto
Commands execution
In the terminal below, a React application is configured. We can run the following commands and install Material UI.
npm install @mui/material @emotion/react @emotion/stylednpm install @mui/icons-materialnpm install @fontsource/robotoTo confirm that all dependencies for Material UI have been installed, we can check the
package.jsonfile and see that the dependencies are added under thedependenciessection. Run thecat package.jsoncommand in the terminal to view the contents.
After running the above commands, we can now use the components provided by the Material UI.
Free Resources
