有没有办法在不指定默认类名或使用 !important 的情况下将样式修改为外部组件库?

问题描述

我的客户正在使用 AntDesign,我们有一个布局,其中有一个搜索输入,现在在 AntDesign 中,Input.Search 组件打包了一个包含在其中的按钮。

问题是布局侧栏和搜索输入共享一个类,因此当它们都在布局内时,它会将一个类应用于我的搜索输入,使按钮内的图标偏移。

AntDesign Search Input image

我可以使用类名 .ant-btn .anticon 直接操作它, 但是这是不好的做法,因为如果更新了类名,这将无声无息地失败,并且可能与一致的站点范围样式发生冲突。

有没有办法在不直接覆盖认类的情况下更新此按钮及其样式?

解决方法

我找到了一个相当简单的 styled-components 解决方案,它允许我创建一个如下所示的组件:

enter image description here 使用 &&& 将允许我在不直接使用类名或使用 !important

的情况下覆盖样式

更多信息可以在这里找到:LESS - Multiple &