如何不依赖默认类名、不使用!important定制AntDesign组件样式

核心思路是通过组件作用域隔离替代全局硬覆盖，完全规避直接修改AntDesign默认类、使用!important的问题，所有方案均满足不污染全站样式、不受组件库版本迭代影响的要求。

方案1：利用Input.Search原生API自定义内置按钮（零CSS侵入） #

Input.Search组件本身开放了button配置项，支持完全自定义内置按钮的渲染逻辑，从根源上避开默认按钮的样式继承问题：

• 不需要修改组件默认内部结构，自定义按钮完全独立渲染，不会继承侧边栏与搜索框共用的公共类样式
• 配置项是AntDesign官方公开的长期兼容API，版本迭代不会随意变更，不存在静默失效风险
• 自定义按钮可单独绑定项目专属类，样式调整完全在当前按钮的独立作用域内完成，不会影响全局其他按钮组件
  代码示例：

<Input.Search
  placeholder="请输入搜索内容"
  allowClear
  // 自定义内置按钮，绕开默认渲染逻辑
  button={
    <Button 
      type="primary"
      icon={<SearchOutlined />}
      className="app-custom-search-btn"
    />
  }
/>

方案2：基于组件专属类的定向样式覆盖（无全局污染） #

如果需要保留Input.Search的默认渲染结构，可通过自定义类做作用域锁定制式覆盖，依靠选择器优先级自然压过公共类的影响，完全不需要!important：

1. 给当前使用的Input.Search绑定一个项目专属的自定义类（如app-search-entry），这类类名由项目自身维护，不受AntDesign版本迭代影响
2. 所有需要调整的图标偏移样式，都以该自定义类为最外层选择器定向匹配，选择器优先级（自定义类+内部类）天然高于全局公共类的单类选择器，无需额外优先级加成
   代码示例（以CSS Module为例，样式本身就具备作用域隔离能力）：

/* 样式仅在当前组件生效，不会泄漏到全局 */
.app-search-entry {
  /* 仅在当前搜索框作用域内调整图标间距，不影响全站其他ant-btn组件的图标位置 */
  .anticon {
    margin-inline-start: 0;
  }
}

注：该方案的选择器不直接修改全局.ant-btn .anticon规则，仅在自定义类包裹的作用域内生效，不会和全站统一的样式规范产生冲突。

方案3：通过ConfigProvider组件级主题Token调整（纯配置无样式代码） #

AntDesign v5及以上版本支持组件粒度的主题配置，不需要编写任何CSS代码即可完成图标位置调整：

• 在搜索框所在的局部层级包裹ConfigProvider，仅针对当前作用域内的Input组件配置专属主题Token，调整搜索按钮内的图标边距参数
• 所有Token值是AntDesign官方公开的配置项，版本迭代有明确兼容承诺，不存在因为默认类名变更导致的样式失效问题
  代码示例：

<ConfigProvider
  theme={{
    components: {
      Input: {
        // 官方公开Token，调整搜索按钮关联的图标间距
        inputPaddingWithSearchAddon: 0,
      }
    }
  }}
>
  {/* 配置仅作用于当前包裹层级，不会影响全站其他Input组件 */}
  <Input.Search placeholder="请输入搜索内容" />
</ConfigProvider>

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