Ant Design搜索栏添加下拉框遇CSS覆盖问题，求解决方案

问题原因 #

当使用Input的addonAfter属性时，Ant Design会将传入的内容包裹到组件内部容器中，内部默认样式优先级高于自定义类名，导致你的.input-field样式被覆盖；同时addonAfter内部的下拉框也会被容器样式影响，难以直接通过类名控制。

解决方案一：使用Input.Group重构结构（推荐） #

改用Input.Group将Input和两个Select组合，结构更透明，样式不会被内部容器覆盖，还能灵活控制布局：

import { Input, Select } from 'antd';
const { Option } = Select;

const SearchField : React.FC<IInputFieldProps> = (props) => (
  <Input.Group className="custom-search-group">
    <Input className="input-field" {...props} />
    <div className="drop-down">
      <Select defaultValue=".com">
        <Option value=".com">.com</Option>
        <Option value=".jp">.jp</Option>
        <Option value=".cn">.cn</Option>
        <Option value=".org">.org</Option>
      </Select>
      <Select defaultValue=".com">
        <Option value=".com">.com</Option>
        <Option value=".jp">.jp</Option>
        <Option value=".cn">.cn</Option>
        <Option value=".org">.org</Option>
      </Select>
    </div>
  </Input.Group>
);

对应的CSS：

.custom-search-group {
  display: flex;
  align-items: center;
}

.input-field {
  box-sizing: border-box;
  height: 2.3em;
  flex: 1; /* 让输入框占满容器剩余空间 */
}

.drop-down {
  display: flex;
  gap: 8px; /* 控制两个下拉框的间距 */
  margin-left: 8px;
}

.drop-down .ant-select {
  width: auto; /* 让下拉框宽度自适应选项内容 */
}

解决方案二：提升CSS选择器优先级 #

如果不想修改组件结构，可以通过更具体的选择器覆盖Ant Design默认样式：

/* 针对Input的样式 */
.input-field.ant-input {
  box-sizing: border-box;
  height: 2.3em;
}

/* 针对下拉框的样式 */
.drop-down .ant-select {
  width: 80px; /* 自定义下拉框宽度 */
}

紧急情况下可使用!important强制覆盖（不推荐，会增加样式维护难度）：

.input-field {
  box-sizing: border-box !important;
  height: 2.3em !important;
}

解决方案三：直接使用style属性 #

将样式通过style属性直接传入Input组件，优先级最高，不会被默认样式覆盖：

const selectAfter = (
  <div className='drop-down'>
    <Select defaultValue=".com">
      <Option value=".com">.com</Option>
      <Option value=".jp">.jp</Option>
      <Option value=".cn">.cn</Option>
      <Option value=".org">.org</Option>
    </Select>
    <Select defaultValue=".com">
      <Option value=".com">.com</Option>
      <Option value=".jp">.jp</Option>
      <Option value=".cn">.cn</Option>
      <Option value=".org">.org</Option>
    </Select>
  </div>
);

const SearchField : React.FC<IInputFieldProps> = (props) => (
  <Input 
    className="input-field" 
    {...props} 
    style={{ boxSizing: 'border-box', height: '2.3em' }} 
    addonAfter={selectAfter} 
  />
); 

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