Material UI V5基础表格实现单行选中并修改字体颜色

要实现点击行切换选中状态、选中行字体变红且单选互斥的效果，只需在现有代码基础上添加状态管理和条件样式即可，具体实现如下：

核心思路 #

1. 用React状态存储当前选中行的唯一标识
2. 给每行添加点击事件，控制选中状态的切换（单选互斥）
3. 根据选中状态动态设置行的字体颜色及视觉样式

完整代码 #

import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
];

export default function BasicTable() {
  // 存储当前选中行的唯一标识（这里用row.name作为唯一键）
  const [selectedRow, setSelectedRow] = React.useState(null);

  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              key={row.name}
              // 点击切换选中状态：重复点击当前行取消选中，点击其他行切换选中
              onClick={() => setSelectedRow(selectedRow === row.name ? null : row.name)}
              sx={{
                '&:last-child td, &:last-child th': { border: 0 },
                cursor: 'pointer',
                // 选中行字体设为红色，否则继承默认颜色
                color: selectedRow === row.name ? 'red' : 'inherit',
                // 选中行添加浅红背景增强视觉反馈
                backgroundColor: selectedRow === row.name ? 'rgba(255, 0, 0, 0.05)' : 'transparent',
                transition: 'background-color 0.2s ease',
                // hover效果区分选中与未选中状态
                '&:hover': {
                  backgroundColor: selectedRow === row.name ? 'rgba(255, 0, 0, 0.08)' : 'rgba(0, 0, 0, 0.04)',
                }
              }}
            >
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

效果说明 #

• 点击任意行切换选中状态，选中行字体变为红色，同时附带浅红色背景
• 选中新行时自动取消之前选中行的状态，实现单选互斥
• 添加光标样式和过渡动画，提升交互体验

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