How to Style the MUI Paper Component: Padding, Margin, Elevation

Material-UI’s Paper component is intended exactly as it sounds: to give apps and components a paper-like background and feel.

The Paper component is often spaced and shadowed using padding, margin, and either the elevation or outlined variant. In this demo, I’ll show the look and feel of four different React Material-UI Tables wrapped in a Paper component with different styles and props. These tables are derived from a trimmed down version of the ‘basic table’ example in the Material-UI docs.

Link to all JavaScript code for this article is in the Resources section at the end of the post.

Here is a YouTube version of this post, or watch it below:

Material-UI Paper Padding and Elevation

In the first table, I applied padding and elevation in the simplest ways: inline styling for padding, and using a prop for elevation. No margin is applied.

<Paper
  elevation={12}
  style={{
    padding: 8,
    backgroundColor: "blue",
    border: "1px solid black"
  }}
>

There’s two things to notice here.

1. I set the Paper background color to blue, and the Table background to white to contrast them. Notice how the Paper padding offsets the Table and the Table conforms nicely to it.
2. The elevation is set to the highest value (12) but takes no pixel space. I included the top of the next table in the screenshot in order to show this, but also take a look at the dev tools below. This means margin is required in order to make the elevation visible.

Material-UI Paper Margin and Border

Table 2 has elevation, margin (bottom) and border:

<Paper
  elevation={12}
  style={{ margin: "0px 0px 8px 0px", border: "1px solid black" }}
>

With margin applied, the elevation is now visible. Elevation translates to the below styling in the DOM:

What’s actually going on is MUI is applying box-shadow via the MuiPaper-elevation class (in this case, MuiPaper-elevation12 specifically because elevation was set to 12).

Material-UI Paper Variants

For Table 3, I applied the outlined variant.

<Paper style={{ margin: "16px 0px" }} variant="outlined">

This adds a grey border via the MuiPaper-outlined class:

If I need to customize the outlined variant, I can create a class that targets and overrides the MuiPaper-outlined class.

As info, if outlined variant is used, elevation is no longer applicable and will be ignored.

Related: Expand your JavaScript knowledge with these 50 challenging questions!

Material-UI Paper Styled Component

***Update for MUI v5: Check out the new styled() API for styled components.

Table 4 is perhaps the most important piece of this article.

If you need Paper component padding to be the same across many parts of your app, consider creating and importing a StyledComponent.

In a separate file I created a ‘StyledPaper’ component using withStyles.

import Paper from "@material-ui/core/Paper";
import { withStyles } from "@material-ui/core/styles";

const StyledPaper = withStyles((theme) => ({
  root: {
    padding: 8,
    border: "1px solid black"
  }
}))(Paper);

export default StyledPaper;

Now I can import this component and there is no need to set padding and border.

<StyledPaper elevation={4}>

I recommend continuing to use the elevation prop because it is far simpler than setting a boxShadow in the StyledPaper component. As we saw above, boxShadow is quite a few lines of styling in and of itself.

Interestingly, Paper is the root component of Accordion. Sometimes the docs won’t list Paper props such as elevation even though they are available when Paper is the root of another component.

Resources

My MUI course on Udemy is now available!!! Build a full MUI app from beginning to end, learn every aspect of the sx prop, styled API, and the theme, and tackle the most challenging components! Do you want an active Q&A with me?!? Check here for coupons for my MUI course on Udemy.

Here’s how to style the Paper component using breakpoints.

See the Paper component in action in this Transfer List component.

Two other great MUI components for spacing and layout are the box component and the container component.

Code Sandbox Link