Блог

Я работаю над проектом, в котором мы пытаемся применить переключатель тем, но таблица дизайна ant имеет свойство наведения по умолчанию, которое мешает нам завершить.

У меня есть таблица, оформленная стилизованными компонентами, например:

 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?