如何在MUI的sx属性中结合state使用nth-child设置表格样式

我有一个表格行（TableRow），希望根据状态值activeColNo为单元格设置样式。请问如何在sx属性中结合activeColNo状态值使用CSS的:nth-child选择器？我尝试了如下代码，但无法生效，有哪些可行的解决方案？

<TableRow
   sx={{
      "& :nth-child({activeColNo})": {
         bgcolor: "red"
       } 
   }}
>

可行解决方案 #

方案1：用模板字符串动态生成选择器 #

你原来的写法里，{activeColNo}没有被正确解析成变量值，需要用模板字符串把选择器拼接起来，让变量值正确插入到:nth-child()中，同时用方括号包裹整个选择器，确保MUI的sx属性能识别：

<TableRow
  sx={{
    [`& :nth-child(${activeColNo})`]: {
      bgcolor: "red"
    }
  }}
>

方案2：直接给目标单元格加样式 #

如果TableRow的子元素是TableCell，也可以在渲染单元格时，直接判断当前列的索引是否匹配activeColNo，给对应TableCell单独设置样式：

<TableRow>
  {columns.map((col, index) => (
    <TableCell
      key={col.id}
      sx={{
        bgcolor: index + 1 === activeColNo ? "red" : "inherit"
      }}
    >
      {col.value}
    </TableCell>
  ))}
</TableRow>

这种方式不需要依赖CSS选择器，逻辑更直观，还能避免选择器解析的潜在问题，适合列结构明确的场景。

方案3：用styled组件封装样式逻辑 #

如果需要在多个地方复用这个样式逻辑，可以用MUI的styled函数创建自定义TableRow组件，把activeColNo作为props传入：

import { styled } from '@mui/material/styles';
import TableRow from '@mui/material/TableRow';

const StyledTableRow = styled(TableRow)(({ theme, activeColNo }) => ({
  [`& :nth-child(${activeColNo})`]: {
    backgroundColor: theme.palette.error.main // 也可以直接用"red"
  }
}));

// 使用组件时
<StyledTableRow activeColNo={activeColNo}>
  {/* 这里放TableCell */}
</StyledTableRow>

这种方式能把样式逻辑和组件分离，更适合复杂或需要复用的场景。

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