ListAPI

React List 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

範例

如需此 React 元件的使用範例和詳細資訊，請造訪元件示範頁面

Lists

Import

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

請閱讀這份關於最小化 bundle 大小的指南，以瞭解它們之間的差異。

Props

原生元件的 Props 也可使用。

名稱	類型	預設值	描述
children	node	-	元件的內容。
color	'danger' \| 'neutral' \| 'primary' \| 'success' \| 'warning' \| string	'neutral'	元件的色彩。它支援對此元件有意義的主題色彩。若要瞭解如何新增自己的色彩，請查看主題元件 — 擴充色彩。
component	elementType	-	用於根節點的元件。可以是使用 HTML 元素的字串或元件。
marker	string	-	清單項目的標記（例如圓點、字元或自訂計數器樣式）。當指定此 prop 時，List Item 會將 CSS display 變更為 `list-item`，以便套用標記。若要查看所有可用選項，請查看 MDN list-style-type 頁面。
orientation	'horizontal' \| 'vertical'	'vertical'	元件方向。
size	'sm' \| 'md' \| 'lg' \| string	'md'	元件的大小（會影響其他巢狀 list* 元件）。若要瞭解如何將自訂大小新增至元件，請查看主題元件 — 擴充尺寸。
slotProps	{ root?: func \| object }	{}	用於每個內部 slot 的 props。
slots	{ root?: elementType }	{}	用於每個內部 slot 的元件。請參閱下方的 Slots API 以取得更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以取得更多詳細資訊。
variant	'outlined' \| 'plain' \| 'soft' \| 'solid' \| string	'plain'	要使用的全域 variant。若要瞭解如何新增自己的 variants，請查看主題元件 — 擴充 variants。
wrap	bool	false	僅適用於水平清單。若為 `true`，清單會將 flex-wrap 設定為 "wrap" 並調整 margin 以產生類似 gap 的行為（未來將移至 `gap`）。

ref 會傳遞至根元素。

主題預設 props

您可以使用 JoyList 來變更此元件的預設 props 透過主題。

Slots

若要瞭解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱	Class 名稱	預設元件	描述
root	.MuiList-root	`'ul'`	呈現 root 的元件。

CSS classes

這些 class 名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slots。

Class 名稱	規則名稱	描述
.MuiList-colorContext	colorContext	當觸發色彩反轉時，套用至根元素的 Class 名稱。
.MuiList-colorDanger	colorDanger	若 `color="danger"`，則套用至根元素的 Class 名稱。
.MuiList-colorNeutral	colorNeutral	若 `color="neutral"`，則套用至根元素的 Class 名稱。
.MuiList-colorPrimary	colorPrimary	若 `color="primary"`，則套用至根元素的 Class 名稱。
.MuiList-colorSuccess	colorSuccess	若 `color="success"`，則套用至根元素的 Class 名稱。
.MuiList-colorWarning	colorWarning	若 `color="warning"`，則套用至根元素的 Class 名稱。
.MuiList-horizontal	horizontal	若 `orientation="horizontal"`，則套用至根元素的 Class 名稱。
.MuiList-nesting	nesting	若以巢狀內容包裝，則套用至根元素的 Class 名稱。
.MuiList-scoped	scoped	若 `scoped` 為 true，則套用至根元素的 Class 名稱。
.MuiList-sizeLg	sizeLg	若 `size="lg"`，則套用至根元素的 Class 名稱。
.MuiList-sizeMd	sizeMd	若 `size="md"`，則套用至根元素的 Class 名稱。
.MuiList-sizeSm	sizeSm	若 `size="sm"`，則套用至根元素的 Class 名稱。
.MuiList-variantOutlined	variantOutlined	若 `variant="outlined"`，則套用至根元素的 Class 名稱。
.MuiList-variantPlain	variantPlain	若 `variant="plain"`，則套用至根元素的 Class 名稱。
.MuiList-variantSoft	variantSoft	若 `variant="soft"`，則套用至根元素的 Class 名稱。
.MuiList-variantSolid	variantSolid	若 `variant="solid"`，則套用至根元素的 Class 名稱。
.MuiList-vertical	vertical	若 `orientation="vertical"`，則套用至根元素的 Class 名稱。

您可以使用下列自訂選項之一來覆寫元件的樣式

使用全域 class 名稱。
在自訂主題中使用規則名稱作為元件 styleOverrides 屬性的一部分。

原始碼

如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。