DEV Community

Cover image for Adding Material-UI to Your React Project
Geethanjali
Geethanjali

Posted on

Adding Material-UI to Your React Project

1.Install Dependencies:
Open your terminal and navigate to your project directory. Run the following command to install Material-UI along with required dependencies:



npm install @mui/material @emotion/react @emotion/styled


Enter fullscreen mode Exit fullscreen mode

If you prefer using styled-components, you can use the following command instead:



npm install @mui/material @mui/styled-engine-sc styled-components


Enter fullscreen mode Exit fullscreen mode

2.Configure Peer Dependencies:
In your package.json file, add the following peerDependencies to ensure compatibility:



"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
}


Enter fullscreen mode Exit fullscreen mode

3.Using Material-UI Icons:
Material-UI also provides a wide range of icons to enhance your application's visual appeal. To include these icons in your project, use the following command:



npm install @mui/icons-material


Enter fullscreen mode Exit fullscreen mode

4.Using Material-UI Components:
With Material-UI installed, you can begin using its components to craft your user interfaces. Import components like buttons, text fields, and more as needed, and integrate them into your React application.

Image description

Output:

Image description

Oldest comments (1)

Collapse
 
bansikah profile image
Tandap Noel Bansikah

great article