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

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

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

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"
}

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

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.

Output:

Comments

[Tandap Noel Bansikah]

great article