MasonryAPI
React Masonry 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。
Demo 示範
Import 引入
import Masonry from '@mui/lab/Masonry';
// or
import { Masonry } from '@mui/lab';閱讀關於最小化 bundle 大小的指南，以瞭解差異。
原生元件的 props 屬性也可用。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| children* | node | - | 元件的內容。 |
| classes | object | - | 覆寫或擴展應用於元件的樣式。 請參閱下方CSS 類別 API 以瞭解更多詳細資訊。 |
| columns | Array<number | string> | number | object | string | 4 | 欄數。 |
| component | elementType | - | 用於根節點的元件。可以是 HTML 元素字串或元件。 |
| defaultColumns | number | - | 元件的預設欄數。這是為伺服器端渲染提供的。 |
| defaultHeight | number | - | 元件的預設高度 (px)。這是為伺服器端渲染提供的。 |
| defaultSpacing | number | - | 元件的預設間距。與 |
| sequential | bool | false | 允許使用循序排序，而不是添加到最短的欄 |
| spacing | Array<number | string> | number | object | string | 1 | 定義子元件之間的間距。它是主題間距的倍數。 |
| sx | Array<func | object | bool> | func | object | - | 允許定義系統覆寫以及額外的 CSS 樣式。 請參閱 `sx` 頁面 以瞭解更多詳細資訊。 |
ref 會轉發到根元素。主題預設 props 屬性
您可以使用 MuiMasonry 透過主題更改此元件的預設 props 屬性。
這些類別名稱對於使用 CSS 設定樣式很有用。它們在觸發特定狀態時應用於元件的插槽。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| .MuiMasonry-root | root | 應用於根元素的樣式。 |
您可以使用以下自訂選項之一覆寫元件的樣式
- 使用全域類別名稱。
- 使用規則名稱作為自訂主題中元件的
styleOverrides屬性 的一部分。
原始碼
如果您在本頁中找不到資訊，請考慮查看元件的實作以瞭解更多詳細資訊。