TableCellAPI

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

示範

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

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

當父層上下文是標題時，此元件會呈現 <th> 元素，否則會呈現 <td> 元素。

原生元件的 props 也可使用。

名稱	類型	預設	描述
align	'center' \| 'inherit' \| 'justify' \| 'left' \| 'right'	'inherit'	設定表格儲存格內容的 text-align。貨幣或一般數字欄位應靠右對齊，這樣您就可以在腦海中快速加總，而無需擔心小數點。
children	node	-	元件的內容。
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方的 CSS 類別 API 以了解更多詳細資訊。
component	elementType	-	用於根節點的元件。可以是字串 (用於 HTML 元素) 或元件。
padding	'checkbox' \| 'none' \| 'normal'	-	設定套用至儲存格的內距。此 prop 預設為從父層 Table 元件繼承的值 (`'default'`)。
scope	string	-	設定 scope 屬性。
size	'medium' \| 'small' \| string	-	指定儲存格的尺寸。此 prop 預設為從父層 Table 元件繼承的值 (`'medium'`)。
sortDirection	'asc' \| 'desc' \| false	-	設定 aria-sort 方向。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，可定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以了解更多詳細資訊。
variant	'body' \| 'footer' \| 'head' \| string	-	指定儲存格類型。此 prop 預設為從父層 TableHead、TableBody 或 TableFooter 元件繼承的值。

ref 會轉發到根元素。

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

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

類別名稱	規則名稱	描述
.MuiTableCell-alignCenter	alignCenter	如果 `align="center"` 套用至根元素的樣式。
.MuiTableCell-alignJustify	alignJustify	如果 `align="justify"` 套用至根元素的樣式。
.MuiTableCell-alignLeft	alignLeft	如果 `align="left"` 套用至根元素的樣式。
.MuiTableCell-alignRight	alignRight	如果 `align="right"` 套用至根元素的樣式。
.MuiTableCell-body	body	如果 `variant="body"` 或 `context.table.body` 套用至根元素的樣式。
.MuiTableCell-footer	footer	如果 `variant="footer"` 或 `context.table.footer` 套用至根元素的樣式。
.MuiTableCell-head	head	如果 `variant="head"` 或 `context.table.head` 套用至根元素的樣式。
.MuiTableCell-paddingCheckbox	paddingCheckbox	如果 `padding="checkbox"` 套用至根元素的樣式。
.MuiTableCell-paddingNone	paddingNone	如果 `padding="none"` 套用至根元素的樣式。
.MuiTableCell-root	root	套用至根元素的樣式。
.MuiTableCell-sizeMedium	sizeMedium	如果 `size="medium"` 套用至根元素的樣式。
.MuiTableCell-sizeSmall	sizeSmall	如果 `size="small"` 套用至根元素的樣式。
.MuiTableCell-stickyHeader	stickyHeader	如果 `context.table.stickyHeader={true}` 套用至根元素的樣式。

您可以使用以下其中一種自訂選項來覆寫元件的樣式

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