Material-UI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google. In this article, we will discuss the z-index in the Material-UI library.
To control the layout we use a z-index which gives a third axis to arrange content. z-index CSS property in Material-UI is designed to layer drawers, modals, snackbars, tooltips, etc in a proper way.
Syntax:
<Box sx={{ zIndex: 'tooltip' }}>
Here Box can be any other component.
These are the default values set in mui in z-index:
- mobile stepper: 1000
- fab: 1050
- speed dial: 1050
- app bar: 1100
- drawer: 1200
- modal: 1300
- snackbar: 1400
- tooltip: 1500
These default values can be changed but it is not recommended. If you change one, you have to change them all.
Installing React App:
Step 1: Create a React app using the following command.
npx create-react-app example_zindex
Step 2: Now get into the project directory
cd example_zindex
Installing Material-UI: Installing Material-UI’s source files via npm/yarn, and they take care of injecting the CSS needed.
npm install @material-ui/core OR yarn add @material-ui/core
Project Structure: It will look like the following.
Example 1: In this example, we will see the basic example which explains how components will render based on their z-Index value.
import * as React from 'react';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
function App() {
return (
<Typography
component="div"
variant="body1"
style={{
height: 100,
width: '300px',
border: '1px solid grey',
position: 'relative',
}}
>
<Box
sx={{
bgcolor: (theme) =>
theme.palette.mode === 'dark' ?
'#101010' : 'grey.600',
color: (theme) =>
(theme.palette.mode === 'dark' ?
'grey.300' : 'grey.50'),
border: '1px solid',
borderColor: (theme) =>
theme.palette.mode === 'dark' ?
'grey.800' : 'grey.300',
p: 2,
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
position: 'absolute',
top: 40,
left: '40%',
zIndex: 'tooltip', //tooltip:1500
}}
>
I am Upper side
</Box>
<Box
sx={{
bgcolor: (theme) => (theme.palette.mode ===
'dark' ? 'grey.800' : '#fff'),
color: (theme) =>
theme.palette.mode === 'dark' ?
'grey.300' : 'grey.800',
border: '1px solid',
borderColor: (theme) =>
theme.palette.mode === 'dark' ?
'grey.800' : 'grey.300',
p: 2,
borderRadius: 2,
fontSize: '0.875rem',
fontWeight: '700',
position: 'absolute',
top: 0,
left: '43%',
zIndex: 'modal', //modal:1300
}}
>
I am Lower side
</Box>
</Typography>
)
}
export default App;
Output:
Example 2: In this example, we will see examples of all the default values of the z-index.
import * as React from 'react';
import Box from "@mui/material/Box";
function App() {
return (
<>
<Box
sx={{
bgcolor: "pink",
color: "grey",
border: "1px solid",
width: "100%",
borderColor: "black",
p: 2,
borderRadius: 2,
fontSize: "0.875rem",
fontWeight: "700",
position: "absolute",
top: 0,
left: "0%",
zIndex: "mobileStepper",
}}
>
z-index mobile stepper
</Box>
<Box
sx={{
bgcolor: "black",
color: "white",
border: "1px solid",
width: "100%",
borderColor: "black",
p: 2,
borderRadius: 2,
fontSize: "0.875rem",
fontWeight: "700",
position: "absolute",
top: 5,
left: "13%",
zIndex: "fab",
}}
>
z-index fab
</Box>
<Box
sx={{
bgcolor: "blue",
color: "white",
width: "100%",
border: "1px solid",
borderColor: "black",
p: 2,
borderRadius: 2,
fontSize: "0.875rem",
fontWeight: "700",
position: "absolute",
top: 10,
left: "20%",
zIndex: "speedDial",
}}
>
z-index speed dial
</Box>
<Box
sx={{
bgcolor: "orange",
color: "blue",
width: "100%",
border: "1px solid",
borderColor: "black",
p: 2,
borderRadius: 2,
fontSize: "0.875rem",
fontWeight: "700",
position: "absolute",
top: 15,
left: "30%",
zIndex: "appBar",
}}
>
z-index app bar
</Box>
<Box
sx={{
bgcolor: "pink",
color: "blue",
width: "100%",
border: "1px solid",
borderColor: "black",
p: 2,
borderRadius: 2,
fontSize: "0.875rem",
fontWeight: "700",
position: "absolute",
top: 20,
left: "41%",
zIndex: "drawer",
}}
>
z-index drawer
</Box>
<Box
sx={{
bgcolor: "red",
color: "blue",
width: "100%",
border: "1px solid",
borderColor: "black",
p: 2,
borderRadius: 2,
fontSize: "0.875rem",
fontWeight: "700",
position: "absolute",
top: 25,
left: "52%",
zIndex: "modal",
}}
>
z-index modal
</Box>
<Box
sx={{
bgcolor: "red",
color: "blue",
width: "100%",
border: "1px solid",
borderColor: "black",
p: 2,
borderRadius: 2,
fontSize: "0.875rem",
fontWeight: "700",
position: "absolute",
top: 25,
left: "52%",
zIndex: "modal",
}}
>
z-index modal
</Box>
<Box
sx={{
bgcolor: "blue",
color: "white",
width: "100%",
border: "1px solid",
borderColor: "black",
p: 2,
borderRadius: 2,
fontSize: "0.875rem",
fontWeight: "700",
position: "absolute",
top: 30,
left: "63%",
zIndex: "snackbar",
}}
>
z-index snackbar
</Box>
<Box
sx={{
bgcolor: "green",
color: "white",
width: "100%",
border: "1px solid",
borderColor: "black",
p: 2,
borderRadius: 2,
fontSize: "0.875rem",
fontWeight: "700",
position: "absolute",
top: 35,
left: "75%",
zIndex: "tooltip",
}}
>
z-index tooltip
</Box>
</>
);
}
export default App;
Output:
Reference: https://mui.com/material-ui/customization/z-index/