如何隐藏Material-UI表格中的指定表头列（如ID列）

核心问题 #

<TableCell>组件本身没有hide属性，直接传递hide={column.hide}不会产生任何效果；如果尝试用display: none没生效，大概率是样式优先级被Material-UI的默认样式覆盖了。

最优解决方案：直接过滤列数组 #

不渲染不需要的列，比通过样式隐藏更高效，代码修改如下：

{columns
  .filter(column => !column.hide) // 过滤掉标记为hide的列
  .map((column) => (
    <TableCell
      key={column.id}
      align={column.align}
      style={{ top: 57, minWidth: column.minWidth }}
    >
      {column.label}
    </TableCell>
  ))}

若坚持用样式隐藏（不推荐） #

使用Material-UI的sx属性提升样式优先级，确保生效：

{columns.map((column) => (
  <TableCell
    key={column.id}
    align={column.align}
    sx={{ 
      top: 57, 
      minWidth: column.minWidth,
      display: column.hide ? 'none' : 'table-cell'
    }}
  >
    {column.label}
  </TableCell>
))}

额外提示 #

你的columns数组里有两个id: 'phone'的列，React渲染列表时要求key必须唯一，这会触发控制台警告，建议给它们设置不同的id（比如phone和phoneBackup）。

内容的提问来源于stack exchange，提问作者Shanu k k