Paper 纸张组件，创建具有层次感和阴影效果的容器组件

Paper 组件是 Material UI（MUI）中用于创建具有层次感和阴影效果的容器组件。它模拟了物理世界中纸张的外观和感觉，通过阴影和表面属性来增强视觉层次感。Paper 组件通常用于构建卡片、对话框或其他需要提升视觉效果的表面。

Paper 的核心属性有 elevation、variant、square和 sx。

elevation 属性

elevation：控制组件的阴影深度，取值范围为 0 到 24。数值越大，阴影越深，组件看起来越“高”

import { Paper, Box, Stack, styled } from "@mui/material";
import { green } from "@mui/material/colors";

const MyPaper = styled(Paper)(({ theme }) => ({
  ...theme.typography.body2,
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  color: theme.palette.text.secondary,
  height: 60,
  lineHeight: "60px",
  fontSize: "3rem",
}));

function PaperDemo() {
  const arr = Array.from({ length: 24 }, (_, i) => i + 1);

  return (
    <Stack direction="column">
      <Box
        sx={{
          display: "flex",
          flexWrap: "wrap",
          "& > :not(style)": {
            m: 1,
            width: 120,
            height: 120,
            backgroundColor: green[200],
          },
        }}
      >
        {arr.map((_, index) => (
          <MyPaper elevation={index}>{index}</MyPaper>
        ))}
      </Box>
    </Stack>
  );
}

export default PaperDemo;