how to use state in sx prop for selecting child in MUI-CodePudding

I have a table row and I want to style the cell based on the state i.e, activeColNo. How can I use CSS nth-child selector with value activeColNo in sx prop.

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

Something like this, but it does not work. What are the possible solutions for it?

CodePudding user response：

Once try this

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

CodePudding user response：

You may try :

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