How to add Material-UI to an existing Reactjs app

How to add Material-UI to an existing Reactjs app:

Material UI framework is used to create material designed React applications using material design components. It is easy to integrate and the documentation provides almost everything that we need to get started.

In this post, I will show you how to add Material-UI to an existing Reactjs app.

Install using npm:

The easiest way to install Material UI is by using npm:

npm install @material-ui/core

Or, by using yarn:

yarn add @material-ui/core

That’s it.

Adding icons and fonts:

We can add Roboto font and font icon easily:

Roboto font:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

font icon:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

It also provides prebuilt SVG icons those can be added using npm or yarn:

npm install @material-ui/icons

yarn add @material-ui/icons

You might also like:

• An introduction to jsx in reactjs
• Typechecking in react js using propTypes
• Find the file name, size, type and modified date of a file in ReactJS
• How to create your first reactjs app using create-react-app
• What are Components in Reactjs and how to use these components