Install Material UI (Material Design) for React

by
Tiempo de lectura: 2 minutos

Material UI is a framework for developing interfaces based on Google Material Design. Personally, I like this design style a lot, both for its components and color palette, striking a balance between usability and modern design.

Let’s learn how to install this framework into our React project. You can find more about this framework here.

The first thing we need to do is install the modules:

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

Additionally, let’s install Roboto, the Google font for Material Design:

npm install @fontsource/roboto --save

Also, install Material icons:

npm install @mui/icons-material --save

Now, we are ready to start.

You can check the list of components at this URL: https://mui.com/material-ui/react-button/

Let’s implement an example of a button. The steps are as follows:

First, import the necessary libraries:

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

Now, create the render:

function BasicButtons() {
  return (
    <Stack spacing={2} direction="row">
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Stack>
  );
}

export default BasicButtons;

We have created this component:

It contains the three buttons from the example.

First, we have created a Stack:

<Stack spacing={2} direction="row">
  {/* ... child elements */}
</Stack>

This creates a container that organizes its child elements in a horizontal row with a space of 2 units between them. Child elements are placed next to each other, and the space between them is of size 2. This can be useful for creating cleaner and evenly spaced layouts.

Then, we created 3 types of buttons offered by the framework:

  <Button variant="text">Text</Button>
  <Button variant="contained">Contained</Button>
  <Button variant="outlined">Outlined</Button>

We have created this component:

It contains the three buttons from the example.

And that concludes today’s tutorial. We have learned how to implement this framework.

Post Views: 2

Leave a Comment