如何删除或更改蚂蚁设计表行悬停的颜色?

时间:2021-01-08 22:11:41

标签: reactjs typescript antd

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

我有一个用样式化组件设计的表格,如下所示:

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

但它现在可以工作了。

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

0 个答案:

没有答案