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>
  );
}

The applies the same green color to all the rows. Will it be because of using expandable table rows ? if so how to handle this

任何帮助都受到高度赞赏。

增编

Answer 1

为此:

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

友情链接