MUI-table：mui 表组件中交替行的不同颜色不起作用

Question

为备用表格行添加不同颜色不起作用

function Row(props) {
  const { row } = props;

  const StyledTableRow = styled(TableRow)(({ theme }) => ({
    '&:nth-of-type(odd)': {
      backgroundColor: "green",
    },
    '&:nth-of-type(even)': {
      backgroundColor: "grey",
    },
  }));

  return (
    <React.Fragment>
      <StyledTableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
        <TableCell>
          <IconButton
            aria-label="expand row"
            size="small"
            onClick={() => setOpen(!open)}
          >
            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          </IconButton>
        </TableCell>
        <TableCell component="th" scope="row">
          {row.Type}
        </TableCell>
        <TableCell align="right">{row.Mix}</TableCell>
        <TableCell align="right">{row.SVC}</TableCell>
        <TableCell align="right">{row.AR}</TableCell>
        <TableCell align="right">{row.Discount}</TableCell>
      </StyledTableRow>
      <TableRow>
        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={8}>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <Box sx={{ margin: 1 }}>
              <Table size="small" aria-label="purchases">
                <TableBody>
                  <TableRow>
                     ..................
                  </TableRow>                                
                </TableBody>
              </Table>
            </Box>
          </Collapse>
        </TableCell>
      </TableRow>
    </React.Fragment>
  );
}

对所有行应用相同的绿色。 是因为使用了可扩展的表格行吗？如果是的话如何处理

非常感谢任何帮助

谢谢

Answer 1

试试这个：

const StyledTableRow = styled(TableRow)(({ theme }) => ({
  backgroundColor: "green",  
  "&:nth-of-type(4n-1)": {
    backgroundColor: "gray",
  },
}))