跳到内容跳到内容
🚀 影响 Joy UI 2025 年路线图！参与最新的开发者调查

SkeletonAPI

React 骨架组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

导入

import Skeleton from '@mui/joy/Skeleton';
// or
import { Skeleton } from '@mui/joy';

阅读这份关于最小化包大小的指南，了解它们之间的区别。

Props

原生组件的 Props 也可用。

名称类型默认值描述
animation'pulse'
| 'wave'
| false		'pulse'

动画效果。如果为 false，则禁用动画效果。

childrennode-

如果未设置 src，则用于在骨架内部渲染图标或文本元素。这可以是元素，也可以只是字符串。

componentelementType-

用于根节点的组件。可以是用于 HTML 元素的字符串，也可以是组件。

heightArray<number
| string>
| number
| { lg?: number
| string, md?: number
| string, sm?: number
| string, xl?: number
| string, xs?: number
| string }
| string		-

骨架的高度。当您不想将骨架调整为文本元素，而是调整为例如卡片时，此属性很有用。

level'h1'
| 'h2'
| 'h3'
| 'h4'
| 'title-lg'
| 'title-md'
| 'title-sm'
| 'body-lg'
| 'body-md'
| 'body-sm'
| 'body-xs'
| 'inherit'
| string		variant === 'text' ? 'body-md' : 'inherit'

应用主题排版样式。

loadingbooltrue

如果为 true，则显示骨架。

overlayboolfalse

如果为 true，骨架的位置将更改为 absolute，以填充最近父元素的可用空间。此 prop 对于创建具有元素尺寸的占位符很有用。

slotProps{ root?: func
| object }		{}

用于内部每个插槽的 props。

slots{ root?: elementType }{}

用于内部每个插槽的组件。

有关更多详细信息，请参阅下面的 Slots API。

sxArray<func
| object
| bool>
| func
| object		-

允许定义系统覆盖以及其他 CSS 样式的系统 prop。

有关更多详细信息，请参阅 `sx` 页面。

variant'circular'
| 'inline'
| 'overlay'
| 'rectangular'
| 'text'
| string		'overlay'

将要渲染的内容类型。

要了解如何添加自己的变体，请查看主题组件—扩展变体。

widthArray<number
| string>
| number
| { lg?: number
| string, md?: number
| string, sm?: number
| string, xl?: number
| string, xs?: number
| string }
| string		-

骨架的宽度。当骨架位于没有自身宽度的内联元素中时，此属性很有用。

`ref` 被转发到根元素。

主题默认 props

您可以使用 JoySkeleton 通过主题更改此组件的默认 props。

插槽

要了解如何自定义插槽，请查看覆盖组件结构指南。

插槽名称类名默认组件描述
root.MuiSkeleton-root'span'渲染根的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们将应用于组件的插槽。

类名规则名称描述
.MuiSkeleton-body-lgbody-lg如果 level="body-lg"，则应用于根元素的类名。
.MuiSkeleton-body-mdbody-md如果 level="body-md"，则应用于根元素的类名。
.MuiSkeleton-body-smbody-sm如果 level="body-sm"，则应用于根元素的类名。
.MuiSkeleton-body-xsbody-xs如果 level="body-xs"，则应用于根元素的类名。
.MuiSkeleton-h1h1如果 level="h1"，则应用于根元素的类名。
.MuiSkeleton-h2h2如果 level="h2"，则应用于根元素的类名。
.MuiSkeleton-h3h3如果 level="h3"，则应用于根元素的类名。
.MuiSkeleton-h4h4如果 level="h4"，则应用于根元素的类名。
.MuiSkeleton-title-lgtitle-lg如果 level="title-lg"，则应用于根元素的类名。
.MuiSkeleton-title-mdtitle-md如果 level="title-md"，则应用于根元素的类名。
.MuiSkeleton-title-smtitle-sm如果 level="title-sm"，则应用于根元素的类名。
.MuiSkeleton-variantCircularvariantCircular如果 variant="circular"，则应用于根元素的类名。
.MuiSkeleton-variantInlinevariantInline如果 variant="inline"，则应用于根元素的类名。
.MuiSkeleton-variantOverlayvariantOverlay如果 variant="overlay"，则应用于根元素的类名。
.MuiSkeleton-variantRectangularvariantRectangular如果 variant="rectangular"，则应用于根元素的类名。
.MuiSkeleton-variantTextvariantText如果 variant="text"，则应用于根元素的类名。

您可以使用以下自定义选项之一覆盖组件的样式

源代码

如果您在此页面中找不到所需的信息，请考虑查看组件的实现以获取更多详细信息。