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/
