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 add papers and cards with Material UI.

Paper

Paper is a component that resembles papers in real life.

To add them, we can use the Paper component.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Paper elevation={0}>foo</Paper>
      <Paper>foo</Paper>
      <Paper elevation={3}>foo</Paper>
    </>
  );
}

to add papers with various depths.

The depths are defined by the elevation prop.

Paper Variants

We can also add the variant prop to make the surface outlined.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Paper variant="outlined" square>
        foo
      </Paper>
    </>
  );
}

We make the variant prop outlined to make it outlined.

Card

Cards contain content and actions about something.

For example, we can add one by writing:

import React from "react";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
export default function App() {
  return (
    <>
      <Card>
        <CardContent>
          <Typography color="textSecondary" gutterBottom>
            Word of the Day
          </Typography>
          <Typography variant="h5" component="h2">
            foo
          </Typography>
        </CardContent>
        <CardActions>
          <Button size="small">Learn More</Button>
        </CardActions>
      </Card>
    </>
  );
}

We add the Card with some CardContent .

To add styled text, we add some Typography component.

Then we added a CardAction to let us do something.

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