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/
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
