javascript - 根据道具颜色不适用于表格中的第一列

Question

我正在尝试根据计算的值在我的行的第一列中着色。如果是偶数，则颜色为白色。如果它是奇怪的，颜色应该是灰色的。通过这种方式，我们可以创建“斑马条纹”效果。第一列也应该“粘贴”并在用户向右滚动时出现。默认情况下，该列根据行着色，所以起初，颜色看起来是正确的。但是，当我滚动时，单元格突然像这样透明： 未滚动： 滚动后：

这是我尝试根据 props.index 值设置每个单元格颜色的代码：

export const TDHeader = styled.td<any>`
  text-align: center;
  border: 2px solid ${theme.gray.lightmedium};
  box-shadow: 1px 0px 0px 0px rgba(147, 147, 147, 0.7);
  border-style: ${props => (props.borderTop ? "solid" : "none")} solid
    ${props => (props.borderBottom ? "solid" : "none")}
    ${props => (props.hideLeft ? "none" : "solid")};
  background-color: ${props =>
    props.index % 2 === 0 ? "rgba(242, 242, 242, 1)" : "rgba(147, 147, 147, 1)"}

  ...
  }
`;

这是使用单元格的示例：

<Row viewer={viewer} index={level.level + zebraStripOffset}>
              <TDHeader
                index={level.level + zebraStripOffset}
                className="bold"
                rowSpan={2}
                hideLeft={true}
                borderBottom={isLastRow}
              >
                {level.level}
              </TDHeader>
...

如您所见，颜色显然没有被应用。我传递道具是否错误，或者可能发生什么？

标签： javascripthtmlcssreactjstypescript