跳到内容跳到内容
🚀 影响 Material UI 2025 年路线图！参与最新的开发者调查

TableCellAPI

API 参考文档，关于 React TableCell 组件。了解此导出的模块的 props、CSS 和其他 API。

演示

导入

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

通过阅读本指南，了解关于最小化 bundle size 的区别。



当父级上下文是 header 时，该组件会渲染 <th> 元素；否则渲染 <td> 元素。

Props

原生组件的 Props 也可用。

名称类型默认值描述
align'center'
| 'inherit'
| 'justify'
| 'left'
| 'right'		'inherit'

设置表格单元格内容的 text-align。
货币或数字字段应该右对齐，这样可以方便您快速心算加总，而无需担心小数。

childrennode-

组件的内容。

classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参阅下方的 CSS 类 API。

componentelementType-

用于根节点的组件。可以是 HTML 元素字符串或组件。

padding'checkbox'
| 'none'
| 'normal'		-

设置应用于单元格的 padding。此 prop 默认为从父 Table 组件继承的值 ('default')。

scopestring-

设置 scope 属性。

size'medium'
| 'small'
| string		-

指定单元格的 size。此 prop 默认为从父 Table 组件继承的值 ('medium')。

sortDirection'asc'
| 'desc'
| false		-

设置 aria-sort direction。

sxArray<func
| object
| bool>
| func
| object		-

允许定义系统 overrides 以及额外的 CSS 样式的系统 prop。

有关更多详细信息，请参阅 `sx` 页面。

variant'body'
| 'footer'
| 'head'
| string		-

指定单元格 variant。此 prop 默认为从父 TableHead、TableBody 或 TableFooter 组件继承的值。

ref 被转发到根元素。

主题默认 Props

您可以使用 MuiTableCell 通过 theme 更改此组件的默认 props。

CSS 类

这些类名对于使用 CSS 设置样式很有用。当特定状态被触发时，它们会被应用到组件的 slots。

类名规则名称描述
.MuiTableCell-alignCenteralignCenter如果 align="center"，则样式应用于根元素。
.MuiTableCell-alignJustifyalignJustify如果 align="justify"，则样式应用于根元素。
.MuiTableCell-alignLeftalignLeft如果 align="left"，则样式应用于根元素。
.MuiTableCell-alignRightalignRight如果 align="right"，则样式应用于根元素。
.MuiTableCell-bodybody如果 variant="body" 或 context.table.body，则样式应用于根元素。
.MuiTableCell-headhead如果 variant="head" 或 context.table.head，则样式应用于根元素。
.MuiTableCell-paddingCheckboxpaddingCheckbox如果 padding="checkbox"，则样式应用于根元素。
.MuiTableCell-paddingNonepaddingNone如果 padding="none"，则样式应用于根元素。
.MuiTableCell-rootroot应用于根元素的样式。
.MuiTableCell-sizeMediumsizeMedium如果 size="medium"，则样式应用于根元素。
.MuiTableCell-sizeSmallsizeSmall如果 size="small"，则样式应用于根元素。
.MuiTableCell-stickyHeaderstickyHeader如果 context.table.stickyHeader={true}，则样式应用于根元素。

您可以使用以下定制选项之一来覆盖组件的样式

源代码

如果您在此页面找不到所需信息，请考虑查看组件的实现代码以了解更多细节。