React + Material-UI 1.0：Table组件是否支持禁用？

嘿，我懂你碰到的问题了——Material-UI的Table、TableBody和TableRow组件本身并不支持disabled属性，这就是你添加了disabled={true}却没看到效果的核心原因！

下面给你两个实用的替代方案，根据你的需求选就行：

方案1：全局禁用表格交互（视觉+功能） #

如果想让整个表格完全无法交互，同时呈现出“禁用”的视觉状态，可以通过CSS来实现：

• 用pointer-events: none阻止所有鼠标/触摸交互
• 调整opacity让表格看起来灰化，给用户明确的视觉提示

示例代码（用Material-UI的makeStyles）：

import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';

const useStyles = makeStyles({
  disabledTable: {
    pointerEvents: 'none',
    opacity: 0.6, // 灰化效果，可根据需求调整
  },
});

export default function MyDisabledTable() {
  const classes = useStyles();
  const isTableDisabled = true; // 这里可以根据业务逻辑控制禁用状态

  return (
    <Table className={isTableDisabled ? classes.disabledTable : ''}>
      <TableBody>
        <TableRow>
          <TableCell>第一列内容</TableCell>
          <TableCell>第二列内容</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

方案2：禁用表格内的可交互子组件 #

如果只是想让表格里的按钮、输入框等控件无法操作，而表格本身的排版/hover样式可以保留，那直接给这些子组件添加disabled属性即可：

<TableRow>
  <TableCell>用户名称</TableCell>
  <TableCell>
    <Button disabled={true} variant="contained">编辑</Button>
  </TableCell>
  <TableCell>
    <TextField disabled={true} value="不可编辑内容" />
  </TableCell>
</TableRow>

额外提示 #

如果你用的是Material-UI的DataGrid组件（而非基础的Table），它是原生支持disabled属性的，但基础Table组件确实没有这个内置属性哦。

内容的提问来源于stack exchange，提问作者Mic C