Paper

Paper 元件是一個容器，用於在提升的表面上顯示內容。

簡介

在 Material Design 中，表面元件和陰影樣式深受現實世界中物理對應物的影響。

Material UI 使用 Paper 元件實作這個概念，這是一個類似容器的表面，具有 elevation 屬性，可從主題中提取陰影框值。

元件

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

自訂

Elevation

使用 elevation 屬性透過陰影的使用來建立階層。Paper 元件的預設 elevation 層級為 1。此屬性接受從 0 到 24 的值。數字越高，Paper 看起來離背景越遠。

在深色模式下，增加 elevation 也會使背景顏色變淺。這是透過使用 background-image CSS 屬性套用半透明漸層來完成的。

變體

將 variant 屬性設定為 "outlined" 以取得平面、外框的 Paper，且沒有陰影

圓角

Paper 元件預設具有圓角。新增 square 屬性以取得方角

結構

Paper 元件由單個根 <div> 組成，它包裝其內容

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

API

請參閱以下文件，以取得此處提及之元件可用的所有屬性和類別的完整參考。

• <Paper />