Skeleton API

Documentação da API para o componente React Skeleton . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import Skeleton from '@mui/material/Skeleton';
// ou
import { Skeleton } from '@mui/material';

The name MuiSkeleton can be used when providing default props or style overrides in the theme.

Propriedades do componente nativo também estão disponíveis.

Nome	Tipo	Padrão	Descrição
animation	'pulse' \| 'wave' \| false	'pulse'	The animation. If `false` the animation effect is disabled.
children	node		Optional children to infer width and height from.
classes	object		Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
component	elementType		The component used for the root node. Either a string to use a HTML element or a component.
height	number \| string		Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
sx	Array<func \| object \| bool> \| func \| object		The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
variant	'circular' \| 'rectangular' \| 'rounded' \| 'text' \| string	'text'	The type of content that will be rendered.
width	number \| string		Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.

O ref é encaminhado para o elemento raiz.

Nome da regra	Classe global	Descrição
root	.MuiSkeleton-root	Estilos aplicados ao elemento raiz.
text	.MuiSkeleton-text	Estilos aplicados para o elemento raiz se `variant="text"`.
rectangular	.MuiSkeleton-rectangular	Estilos aplicados para o elemento raiz se `variant="rectangular"`.
rounded	.MuiSkeleton-rounded	Styles applied to the root element if `variant="rounded"`.
circular	.MuiSkeleton-circular	Estilos aplicados para o elemento raiz se `variant="circular"`.
pulse	.MuiSkeleton-pulse	Estilos aplicados para o elemento raiz se `animation="pulse"`.
wave	.MuiSkeleton-wave	Estilos aplicados para o elemento raiz se `animation="wave"`.
withChildren	.MuiSkeleton-withChildren	Styles applied when the component is passed children.
fitContent	.MuiSkeleton-fitContent	Styles applied when the component is passed children and no width.
heightAuto	.MuiSkeleton-heightAuto	Styles applied when the component is passed children and no height.

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.