DEV Community

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

Posted on

10

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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (1)

Collapse
 
bansikah profile image
Tandap Noel Bansikah

great article

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay