Material UI > MUI Paper

Material UI Paper Component - Examples

Material UI Paper Component CSS

The Paper component is very simple. It is a single <div> with some React props that map to CSS properties. As we'll show below, not all CSS props are available as React props, and most of the time we will be adding CSS via the className prop to customize the border or backgroundColor. The key prop to note is the elevation prop, which sets the box-shadow to theme.shadows[number] defined in the Material UI default styles. For other props, see the links below for the API and check out the short source code for this component.

Paper Background Color

To set a background color on Material UI's Paper, you simply need to apply the background-color CSS property to the root element of the Paper. Setting the styles on the root element of any Material UI component can be done in multiple ways, but the most common is to use the useStyles hook. As you can see in the example above, we create our CSS classes, defining a yellowPaper class which sets a backgroundColor to be Material UI's yellow color. Then, simply applying that one class to our <Paper> component via the className prop, the classes are applied to the root Paper element, which is the <div> representing the Paper. This component is only one <div>, so it is quite a simple component.

Paper Padding

By default there is no padding on the Paper component. You can add padding by rendering a <Box> component within a Paper and using the shorthand system prop to style custom padding, like p={1}. The number in the system defaults to X * 8 pixels. So in this example, p=1 translates to padding: 8px.

Paper Width and Height

The Paper component has no width or height properties. It behaves like a normal <div> element, because that's what it is, a single <div> with a few CSS properties. In the above example, you can see we target all children of the container to have width/height of theme.spacing(...). This was how Material UI sized the Paper elements in their example.

Paper Elevation

The Paper's elevation prop simply maps Material UI's theme.shadows to box-shadow based on the number. The range is from 0 to 24, where 0 is box-shadow: none and 24 is shadow of around 40px. You can see the full list of shadows in the default theme.

Paper Border Color

By default, the Paper component uses an elevation (box-shadow) of 1 and no border. If you set the variant prop to be 'outlined', you will get a border of 1px solid ${theme.palette.divider}. If you want to fully customize the border, you can use CSS classes to style the border on the root Paper element. See the above example, where we apply our own custom border.

Paper border radius / square prop

By default, the Paper has a border-radius of theme.shape.borderRadius which is 4px. If you want to customize the border radius, you can create a CSS property on a custom class to set the border radius on the root component. If you set the square prop to true, the border-radius will be set to 0. See above examples for how we implement these.

Official Docs for Material UI Paper

Paper API

Paper source

Lesson 4/12

import React from "react";
import ReactDOM from "react-dom";
import Paper from "@mui/material/Paper";
import yellow from "@mui/material/colors/yellow";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import CardContent from "@mui/material/CardContent";
import CardActions from "@mui/material/CardActions";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";

function App() {
  return (
    <Box sx={{ "& > *": { m: 1, width: 256, height: 128 } }}>
      <Paper>
        <Typography variant="h5">Default Paper</Typography>
      </Paper>
      <Paper elevation={6}>
        <Box p={1}>
          <Typography variant="h5">Elevation</Typography>
        </Box>
      </Paper>
      <Paper sx={{ backgroundColor: yellow[300] }}>
        <Box p={1}>
          <Typography variant="h5">backgroundColor</Typography>
        </Box>
      </Paper>
      <Paper variant="outlined" square>
        <Box p={1}>
          <Typography variant="h5">outlined + square</Typography>
        </Box>
      </Paper>
      <Paper sx={{ border: `3px solid ${yellow[200]}` }}>
        <Box p={1}>
          <Typography variant="h5">custom border</Typography>
        </Box>
      </Paper>
      <Paper sx={{ borderRadius: "25px" }} elevation={5}>
        <Box p={1}>
          <Typography variant="h5">custom border radius</Typography>
        </Box>
      </Paper>
      <Card>
        <CardContent>
          <Typography variant="h6">Card</Typography>
          <Typography variant="body2">CardContent CardActions</Typography>
        </CardContent>
        <CardActions>
          <Button size="small" color="primary">
            Primary
          </Button>
          <Button size="small" color="secondary">
            Secondary
          </Button>
        </CardActions>
      </Card>
    </Box>
  );
}

export default App;

Open Sandbox