How to Style Material-UI Paper Padding, Margin, and 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.

Table 1

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.

Table 2

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).

Table 3

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!

Table 4

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:

Are you looking for training in Material-UI? Check out my review of the 3 best Material-UI courses in Udemy, including my top pick with 40+ hours of training content.

Code Sandbox Link

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.

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.