Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to get started with Material Design.

Installation

We can install the package by running:

npm install @material-ui/core

with NPM or:

yarn add @material-ui/core

to install it with Yarn.

We can also add the Roboto font by writing:

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

in our HTML.

Material design icons can be added with:

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

We can then get started by using some components from the package.

Box

We can make our layout with the Box component.

For example, we can write:

import React from "react";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";

export default function App() {
  return (
    <Box component="span" m={1}>
      <Button>foo</Button>
    </Box>
  );
}

to add the Box component for layout with a button inside.

component specifies which component to render as.

We can use clone to call React.cloneElement to clone elements:

import React from "react";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";

export default function App() {
  return (
    <Box color="text.primary" clone>
      <Button>foo</Button>
    </Box>
  );
}

#technology #javascript #web-development #software-development #programming #material ui