Categories
Material UI

Getting Started with Material UI

Spread the love

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>
  );
}

Box can also accept a render props function:

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">{props => <Button {...props}>foo</Button>}</Box>
  );
}

Container

We can add a container with the Container component.

For instance, we can write:

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

export default function App() {
  return <Container maxWidth="sm">foo</Container>;
}

We can add a Container component.

maxWidth specifies the max-width of the container.

sm means it’s a small container.

It can also have a fixed size:

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

export default function App() {
  return <Container fixed>foo</Container>;
}

We made it fixed with the fixed prop.

Grid

We can create our own grid with the Grid component.

For instance,e we can use as follows:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    height: 140,
    width: 200
  },
  control: {
    padding: theme.spacing(2)
  }
}));
export default function App() {
  const [spacing] = React.useState(2);
  const classes = useStyles();

  return (
    <Grid container className={classes.root} spacing={2}>
      <Grid item xs={12}>
        <Grid container justify="center" spacing={spacing}>
          {[0, 1, 2].map(value => (
            <Grid key={value} item>
              <Paper className={classes.paper} />
            </Grid>
          ))}
        </Grid>
      </Grid>
    </Grid>
  );
}

We have the Grid components.

The outer one is used as a container.

We pass in a class that’s created by makeStyles to it to set the flexbox to expand.

spacing is set to 2 to give us a margin.

In the inner Grid , we add the item prop to indicate that it’s a grid item.

justify lets us set the alignment according to the flexbox.

Then we add the Grid to display some boxes inside the container.

Fluid Grids

We can make the grid fluid with some breakpoints:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12} sm={3}>
          <Paper className={classes.paper}>foo</Paper>
        </Grid>
        <Grid item xs={12} sm={3}>
          <Paper className={classes.paper}>bar</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>baz</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

We create a grid with the makeStyles function to create the styles for our grid.

We have the root class to make the grid fill the container.

Then we have some breakpoint props to let us set the width for each breakpoint.

xs is extra small and it’ll set the column size for that screen size.

sm is small and it’ll set the column size for that screen size and up.

Conclusion

We can create basic layouts with Material UI.

It’s can be fixed size or responsive.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *