reactjs - 如何删除或更改 ant design table 行悬停的颜色？

Question

我正在处理一个我们正在尝试应用主题切换器的项目，但是 ant 设计的表格有一个默认的悬停属性，它阻止我们完成。

我有一张表，使用 Styled Components 进行样式设置，如下所示：

export const StyledTable = styled((props: TableProps<IRoute>) => (
  <Table {...props} />
))`
  th.ant-table-cell,
  button,
  td {
    color: ${(props) => props.theme.colors.text};
    background: ${(props) => props.theme.colors.background};
  }
  span,
  svg {
    color: ${(props) => props.theme.colors.text};
  }
  .tag {
    background: ${(props) => props.theme.colors.background};
  }
  td {
    border-color: ${(props) => props.theme.colors.strokes};
  }
  span.ant-tag.ant-tag-green {
    color: ${(props) => props.theme.colors.text2};
    background: ${(props) => props.theme.colors.approved};
    border: 0;
  }
  span.ant-tag.ant-tag-red {
    color: ${(props) => props.theme.colors.text2};
    background: ${(props) => props.theme.colors.rejected};
    border: 0;
  }
  span.ant-tag.ant-tag-orange {
    color: ${(props) => props.theme.colors.text2};
    background: ${(props) => props.theme.colors.pending};
    border: 0;
  }
  span.ant-tag.ant-tag-purple {
    border: 2px solid #d3adf7;
    font-weight: 600;
  }
  .routesTable .ant-table .ant-table-tbody .ant-table-cell > tr:hover > td {
    background: unset;
  }
`;

此表的样式如下所示：

export const StyledTable = styled((props: TableProps<IRoute>) => (
  <Table {...props} />
))`
  th.ant-table-cell,
  button,
  td {
    color: ${(props) => props.theme.colors.text};
    background: ${(props) => props.theme.colors.background};
  }
  span,
  svg {
    color: ${(props) => props.theme.colors.text};
  }
  .tag {
    background: ${(props) => props.theme.colors.background};
  }
  td {
    border-color: ${(props) => props.theme.colors.strokes};
  }
  span.ant-tag.ant-tag-green {
    color: ${(props) => props.theme.colors.text2};
    background: ${(props) => props.theme.colors.approved};
    border: 0;
  }
  span.ant-tag.ant-tag-red {
    color: ${(props) => props.theme.colors.text2};
    background: ${(props) => props.theme.colors.rejected};
    border: 0;
  }
  span.ant-tag.ant-tag-orange {
    color: ${(props) => props.theme.colors.text2};
    background: ${(props) => props.theme.colors.pending};
    border: 0;
  }
  span.ant-tag.ant-tag-purple {
    border: 2px solid #d3adf7;
    font-weight: 600;
  }
  .routesTable .ant-table .ant-table-tbody .ant-table-cell > tr:hover > td {
    background: unset;
  }
`;

但它现在正在工作。

我在研究中看到其他人有同样的问题，但没有人设法解决它。有谁知道是否可以取消或更改 ant 设计表的悬停颜色？

标签： reactjstypescriptantd