TableSortLabelAPI

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

範例

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

import TableSortLabel from '@mui/material/TableSortLabel';
// or
import { TableSortLabel } from '@mui/material';

閱讀這份關於最小化 bundle size 的指南，以了解差異。

一個基於按鈕的標籤，用於放置在 TableCell 內以進行欄位排序。

ButtonBase 元件的 props 也可使用。

名稱	類型	預設值	描述
active	bool	false	若為 `true`，標籤將具有啟用的樣式（排序欄位應為 true）。
children	node	-	標籤內容，箭頭將自動附加。
classes	object	-	覆寫或擴充套用至元件的樣式。有關更多詳細資訊，請參閱下方的 CSS 類別 API。
direction	'asc' \| 'desc'	'asc'	目前的排序方向。
hideSortIcon	bool	false	當 active 為 false 時，隱藏排序圖示。
IconComponent	elementType	ArrowDownwardIcon	要使用的排序圖示。
slotProps	{ icon?: func \| object, root?: func \| object }	{}	用於每個 slot 內部的 props。
slots	{ icon?: elementType, root?: elementType }	{}	用於每個 slot 內部的元件。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及其他 CSS 樣式。有關更多詳細資訊，請參閱 `sx` 頁面。

ref 會轉發到根元素。

雖然上方未明確記載，但 ButtonBase 元件的 props 也可在 TableSortLabel 中使用。您可以利用這點來鎖定巢狀元件。

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

Slot 名稱	類別名稱	預設元件	描述
root	.MuiTableSortLabel-root	`span`	呈現 root slot 的元件。
icon	.MuiTableSortLabel-icon	`ArrowDownwardIcon`	呈現 icon slot 的元件。

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

類別名稱	規則名稱	描述
.Mui-active		若 `active={true}`，則套用至 root 元素的狀態類別。
.MuiTableSortLabel-directionAsc	directionAsc	若 `direction="asc"`，則套用至 root 元素的樣式。
.MuiTableSortLabel-directionDesc	directionDesc	若 `direction="desc"`，則套用至 root 元素的樣式。
.MuiTableSortLabel-iconDirectionAsc	iconDirectionAsc	若 `direction="asc"`，則套用至 icon 元件的樣式。已棄用－請改為合併 .MuiTableSortLabel-icon 和 .MuiTableSortLabel-directionAsc 類別。有關更多詳細資訊，請參閱從已棄用的 API 遷移。
.MuiTableSortLabel-iconDirectionDesc	iconDirectionDesc	若 `direction="desc"`，則套用至 icon 元件的樣式。已棄用－請改為合併 .MuiTableSortLabel-icon 和 .MuiTableSortLabel-directionDesc 類別。有關更多詳細資訊，請參閱從已棄用的 API 遷移。

您可以使用下列其中一種客製化選項來覆寫元件的樣式

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