Material-UI实现表格各行不同hover背景色的方法

我编写了如下代码：

<TableBody sx={{".MuiTableRow-root:hover": {
   backgroundColor: "#DDDDDD"
 }}} >
<TableRow><TableCell>test1</TableCell></TableRow>
<TableRow><TableCell>test2</TableCell></TableRow>
<TableRow><TableCell>test3</TableCell></TableRow>
</TableBody>

当前代码可实现鼠标悬停表格行时背景色变为#DDDDDD，但我希望为每行设置不同的悬停背景色：test1行悬停时背景色为#FFFFFF，test2行悬停时为#DDDDDD，test3行悬停时为#222222。我猜测需要在每个TableRow中设置sx属性，但不确定如何修改.MuiTableRow-root:hover，请问该如何实现？

直接在每个TableRow的sx属性中定义自身的悬停样式即可，无需使用全局的.MuiTableRow-root:hover选择器——因为TableRow本身就是MuiTableRow-root元素，用&:hover就能直接定位到当前行的悬停状态：

<TableBody>
  <TableRow sx={{ "&:hover": { backgroundColor: "#FFFFFF" } }}>
    <TableCell>test1</TableCell>
  </TableRow>
  <TableRow sx={{ "&:hover": { backgroundColor: "#DDDDDD" } }}>
    <TableCell>test2</TableCell>
  </TableRow>
  <TableRow sx={{ "&:hover": { backgroundColor: "#222222", color: "#FFFFFF" } }}>
    <TableCell>test3</TableCell>
  </TableRow>
</TableBody>

关键说明 #

• 这种方式的样式优先级高于TableBody上的全局设置，能精准覆盖单一行的悬停效果
• 第三行因为背景是深色#222222，额外添加了color: #FFFFFF保证文字清晰，可根据需求调整
• 如果需要保留TableBody的默认悬停样式，仅修改特定行，直接在对应TableRow的sx中覆盖即可，无需删除TableBody的原有配置

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