React MUI z-index

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.

project structure

Example 1: In this example, we will see the basic example which explains how components will render based on their z-Index value.

Javascript

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.

Javascript

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/