Paper

Paper 组件是一个容器，用于在凸起的表面上显示内容。

简介

在 Material Design 中，表面组件和阴影样式很大程度上受到真实物理对应物的影响。

Material UI 使用 Paper 组件实现了这个概念，Paper 组件是一个类似容器的表面，具有 elevation 属性，用于从主题中提取 box-shadow 值。

组件

import Paper from '@mui/material/Paper';

自定义

阴影高度

使用 elevation 属性通过阴影建立层级结构。Paper 组件的默认阴影高度级别为 1。该属性接受从 0 到 24 的值。数字越高，Paper 看起来离其背景越远。

在暗黑模式下，增加阴影高度也会使背景颜色变浅。这是通过应用带有 background-image CSS 属性的半透明渐变来完成的。

变体

将 variant 属性设置为 "outlined" 可获得扁平、带轮廓且无阴影的 Paper

圆角

Paper 组件默认具有圆角。添加 square 属性可获得直角

结构

Paper 组件由单个根 <div> 组成，它包裹着其内容

<div class="MuiPaper-root">
  <!-- Paper contents -->
</div>

API

请参阅下面的文档，以获取此处提及的组件的所有可用属性和类的完整参考。

• <Paper />