Material-UI Backdrop Example: How to Masking the Contents of a div

Normally I like to take a Material-UI component and customize it in a challenging and useful way. However, the Backdrop component is a simple mask component that might be used with a modal or used to block a section of the screen while waiting for data to load.

With something this straight forward, I struggled with a creative customization. Instead, I decided to crowdsource the idea via Google search:

I guess I should….create a Material-UI backdrop example of setting z-index and opacity on a backdrop inside a div 😃!

Default Backdrop Styling

A Backdrop with default styling has these two critical properties:

  • It is position: fixed (with top, left, right, bottom all set to zero) — this makes it fill the whole viewport
  • The z-index -1 — it will only ‘cover’ components with a lower z-index (most components default to 0)
Default backdrop CSS

I forked the Code Sandbox from the MUI Backdrop docs, added a button background color, div with text, and removed all but the default styling on Backdrop.

The viewport is covered due to the fixed positioning, but the button and text div are not covered due to their higher z-index of 0. Also of interest, the default opacity is 1.

Material-UI Backdrop Inside a Div

Let’s make the backdrop only mask the content of a div. Similar code might be used to mask the contents of a Card.

I wrapped the Lorem Ipsum text and the Backdrop together in a div. React code below:

<div
style={{
backgroundColor: "blue",
position: "relative" //don't forget this
}}
>
<div>
Lorem ipsum...
</div>
<Backdrop className={classes.root} open={open} onClick={handleClose}>
<CircularProgress color="inherit" />
</Backdrop>
</div>

Next, I styled the Backdrop:

position: "absolute",
zIndex: theme.zIndex.drawer - 1,
opacity: 0.5

This removes the viewport-wide positioning and instead makes positioning dependent on a parent with position: relative. It also sets the z-index high enough to be ‘above’ most components, but ensures that a Drawer component will not be covered. That seems reasonable to me, since a Drawer may be used for navigation. As info, theme.zIndex.drawer is 1200 by default.

At this point, I expected the Backdrop to cover the Lorem Ipsum div. Instead, it covered the whole screen. Then I remembered, the parent div needed position: relative (It’s in the code snippet above, but I initially forgot it. All HTML elements have a default position of static).

There we go, a Backdrop masking the contents of its parent div:

A similar component that also (secretly) acts like a modal is the Popover component. It has an invisible mask that actually makes other components unclickable while the Popover is open.

Potential uses for a Backdrop include dimming a table or data grid while they are loading.

Resources:

Expand your JavaScript knowledge with these 50 difficult JavaScript questions!

Code Sandbox with full React code

Backdrop API

Backdrop Component Docs

Share this post:

Leave a Comment

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