ReactJs 如何使用Paper组件

在Material UI中，Paper组件与卡片组件非常相似，基本上，它也会创建一个所需尺寸的卡片。

卡片和纸张组件的主要区别在于 “海拔 “道具。Elevation道具允许为Paper组件设置盒状阴影，以增加3D效果。

语法

用户可以按照下面的语法来使用Material UI的Paper组件。

<Paper/>

例子1 (Paper组件的基本使用)

在下面的例子中，我们在Material UI的Box组件中添加了Paper组件。同时，我们通过向盒子组件传递道具来设置纸质组件的尺寸。

import React from "react";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
const App = () => {
   return (
      <div style = {{ backgroundColor: "grey" }}>
         <h3>
            {" "}
            Using the <i> Paper </i> Component of the Material UI to create a paper.{" "}
         </h3>
         <Box
            sx={{
               display: "inline-block", "& > :not(style)": {
                  m: 1,
                  width: 200,
                  height: 200,
               },
            }}
            >
            <Paper />
            <Paper />
         </Box>
      </div>
   );
};
export default App;

输出

在输出中，用户可以看到与卡片类似的纸张。

如何在ReactJS中使用Paper组件？

例2 (为Paper组件添加自定义CSS)

在下面的例子中，我们把样式作为Paper组件的一个道具。我们改变了第一个Paper组件的边界半径。此外，我们还改变了第二个Paper组件的背景颜色和第三个Paper组件的边界。

import React from "react";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
const App = () => {
   return (
      <div style = {{ backgroundColor: "blue" }}>
         <h3>
            {" "}
            Using the <i> Paper </i> Component of the Material UI to create a paper and adding the custom style.{" "}
         </h3>
         <Box
            sx={{
               display: "inline-block", "& > :not(style)": {
                  m: 1,
                  width: 100,
                  height: 100,
               },
            }}
            >
            <Paper style = {{ borderRadius: "30px" }} />
            <Paper style = {{ backgroundColor: "pink" }} />
            <Paper style = {{ border: "7px dotted green" }} /> 
         </Box>
      </div>
   );
};
export default App;

输出

如何在ReactJS中使用Paper组件？

例子3 (使用海拔作为道具)

在下面的例子中，我们使用了海拔高度作为Paper组件的道具。高程道具代表箱体阴影，接受0、1、2、3、4、8、12、16、24作为数值。仰角根据深色和浅色的主题，在0值时应用0px的箱体阴影，在24值时应用40px的仰角。

随着箱体阴影的增加，提高抬高值可以增加纸张组件的3D效果。

import React from "react";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
const App = () => {
   return (
      <div>
         <h3>
            {" "}
            Using the <i> Paper </i> Component of the Material UI and adding different elevations to it {" "}
         </h3>
         <Box
            sx = {{
               display: "flex", "& > :not(style)": {
                  m: 1,
                  width: 100,
                  height: 100,
               },
            }}
            >
            <Paper elevation = {0} />
            <Paper elevation = {1} />
            <Paper elevation = {2} />
            <Paper elevation = {4} />
            <Paper elevation = {8} />
            <Paper elevation = {12} />
            <Paper elevation = {24} />
         </Box>
      </div>
   );
};
export default App;