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 ?!
View a YouTube version of this post or watch below:
Default MUI 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)
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. The Dialog component has a built-in Backdrop.
MUI Backdrop Color
There are two aspects to the Backdrop color:
- Background color – this can be customized but be careful with opacity
- Color – this will affect the Progress Indicator
If we want to customize the Backdrop color, we can do so in the root class on the Backdrop:
root: {
color: "green",
backgroundColor: "rgb(240,230,0,0.4)",
position: "absolute",
zIndex: theme.zIndex.drawer - 1,
//opacity: 0.5
}
The background color needs to include an opacity value or else it will obscure the text of the div. The rgba opacity value will take precedence over the opacity CSS property.
Notice the color: "green" value was inherited by the Progress Indicator.
Here’s the MUI v5 styling using the sx prop:
const backdropStyle = {
color: "green",
backgroundColor: "rgb(240,230,0,0.4)",
position: "absolute",
zIndex: theme.zIndex.drawer - 1,
}
//JSX
<Backdrop sx={backdropStyle}/>Resources:
Expand your JavaScript knowledge with these 50 difficult JavaScript questions!
Here’s a guide to the MUI Progress Bar.