如何覆盖第三方库中深层嵌套的ant-input-clear-icon元素样式？

我明白你遇到的困扰——在使用CSS Modules + LESS时，想覆盖Ant Design的ant-input-clear-icon样式却总是失败，虽然用!important能解决，但总觉得不够优雅对吧？

问题根源 #

你之前的代码没生效，是因为CSS Modules的局部作用域特性：默认情况下，所有写在CSS Modules里的类名都会被编译成带哈希的局部类（比如你的ant_input_clear_icon_Wrapper变成了ant_input_clear_icon_Wrapper8JxTE）。而你直接写的.ant-input-clear-icon也会被当成局部类处理，编译后会带上哈希后缀，自然匹配不到Antd的全局类名。

最优解决方案 #

用CSS Modules提供的:global()语法，把全局类名包裹起来，这样就能让ant-input-clear-icon保持全局类的身份，和你的局部wrapper类组合成有效的选择器：

/* 让清除图标变大的最优写法 */
.ant_input_clear_icon_Wrapper {
  :global(.ant-input-clear-icon) {
    font-size: 19px;
  }
}

这个写法的好处：

• 不需要!important，靠选择器优先级就能覆盖Antd的默认样式
• 保持了CSS Modules的局部作用域，不会污染全局样式
• 代码清晰，明确指定了要修改的全局类

为什么你的临时方案能生效？ #

你写的：

.ant_input_clear_icon_Wrapper {
  i {
    font-size: 19px !important;
  }
}

能生效是因为i是标签选择器，不会被CSS Modules处理成局部类，再加上!important强制提升了优先级。但这种写法不够精准（会影响wrapper里所有的i标签），而且!important会让后续样式维护变得麻烦，所以还是推荐上面的:global()方案。

内容的提问来源于stack exchange，提问作者user1088793