Pular para o conteúdo

Masonry API

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

Importação

import Masonry from '@mui/lab/Masonry';
// ou
import { Masonry } from '@mui/lab';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

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

Propriedades

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

NomeTipoPadrãoDescrição
children*node
The content of the component.
classesobject
Override or extend the styles applied to the component. See CSS API below for more details.
columnsArray<number
| string>
| number
| object
| string
4
Number of columns.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
defaultColumnsnumber
The default number of columns of the component. This is provided for server-side rendering.
defaultHeightnumber
The default height of the component in px. This is provided for server-side rendering.
defaultSpacingnumber
The default spacing of the component. Like spacing, it is a factor of the theme's spacing. This is provided for server-side rendering.
spacingArray<number
| string>
| number
| object
| string
1
Defines the space between children. It is a factor of the theme's spacing.
sxArray<func
| object
| bool>
| func
| object
Allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regraClasse globalDescrição
root.MuiMasonry-rootStyles applied to the root element.

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

Demonstrações