我正在处理一个我们正在尝试应用主题切换器的项目,但蚂蚁设计的表格有一个默认的悬停属性,阻止我们完成。
我有一个用样式化组件设计的表格,如下所示:
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;
}
`;
但它现在可以工作了。
我在研究中看到其他人也有同样的问题,但没有人设法解决。有谁知道是否可以取消或更改蚂蚁设计表的悬停颜色?