如何将Material React Table固定列及选中行透明度设为0？

问题根源在于Material UI表格的行选中、悬停状态会给单元格添加自带样式，且这些样式优先级高于你直接设置的backgroundColor，导致固定列出现透底情况。你需要针对性覆盖这些状态下的样式，确保优先级足够：

muiTableBodyCellProps: ({ column, row }) => {
  const isPinned = column.getIsPinned();
  const isSelected = row.getIsSelected();
  return {
    sx: {
      // 基础固定列背景设置
      ...(isPinned && { backgroundColor: 'white' }),
      // 选中状态下的固定列样式
      '&.Mui-selected': {
        ...(isPinned && { backgroundColor: 'white', opacity: 1 }),
      },
      // 普通悬停状态下的固定列样式
      '&:hover': {
        ...(isPinned && { backgroundColor: 'white', opacity: 1 }),
      },
      // 选中行悬停时的固定列样式
      '&.Mui-selected:hover': {
        ...(isPinned && { backgroundColor: 'white', opacity: 1 }),
      },
    },
  };
}

核心说明： #

• 利用Material UI内置的Mui-selected类名定位选中状态单元格，提升样式优先级，覆盖默认样式
• 同时处理普通悬停、选中状态、选中行悬停三种场景，避免遗漏
• 通过opacity: 1确保固定列完全不透明，配合白色背景彻底遮挡下方元素

如果仍存在优先级问题，可临时使用!important作为兜底（不推荐长期使用）：

'&.Mui-selected': {
  ...(isPinned && { backgroundColor: 'white !important', opacity: 1 !important }),
},

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