极客教程React MUI z-index
Material-UI 是一个用户界面库，提供了预定义和可自定义的React组件，用于更快速和简便的网页开发，这些Material-UI组件基于Google的Material Design。在本文中，我们将讨论Material-UI库中的z-index。
为了控制布局，我们使用z-index来给内容排列提供第三个轴。Material-UI中的z-index CSS属性被设计用于以正确的方式堆叠抽屉、模态框、快捷栏、工具提示等。
语法:
<Box sx={{ zIndex: 'tooltip' }}>
这里的 Box 可以是任何其他组件。
这些是mui中设置的z-index的默认值：
- 移动步进条：1000
- 浮动操作按钮：1050
- 速拨菜单：1050
- 应用栏：1100
- 抽屉：1200
- 模态框：1300
- 消息提示框：1400
- 工具提示框：1500
这些默认值可以进行更改，但不建议这样做。如果更改一个值，就必须全部更改。
安装React App:
步骤1: 使用以下命令创建一个React App。
npx create-react-app example_zindex
步骤2： 现在进入项目目录
cd example_zindex
安装 Material-UI: 通过 npm/yarn 安装 Material-UI 的源文件，并且它们会自动注入所需的 CSS。
npm install @material-ui/core
OR
yarn add @material-ui/core
项目结构： 它将如下所示。
示例1： 在这个示例中，我们将看到基本示例，它解释了组件如何根据它们的z-Index值进行渲染。
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;
输出:
示例2： 在这个示例中，我们将看到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;
输出:
参考资料: https://mui.com/material-ui/customization/z-index/