如何让Ant Design多选Select搜索框占满容器且避免标签异常换行

问题场景 #

我刚接触Ant Design，使用了如下多选模式的Select组件：

<Select
      mode="multiple"
      placeholder="placeholder"
      options={opts}
      menuItemSelectedIcon={null}
      onSelect={handleChange}
    />

发现搜索框无法占满容器宽度（图示：搜索框仅占部分宽度，未填满Select组件容器）。

尝试的解决方案及新问题 #

我尝试在global.css中添加以下样式解决宽度问题：

.ant-select-selection-search-input {
  width: 100% !important;
}

.ant-select-selection-search {
  width: 100% !important;
}

.ant-select-selection-overflow-item {
  width: 100% !important;
}

虽解决了宽度问题，但引发新问题（图示：选中的标签每行仅显示一个，即使容器有剩余空间，且底部留有空行）：选中标签即使有空间也每行仅显示一个，且底部留空行。

正确解决方案 #

问题出在给.ant-select-selection-overflow-item设置了width:100% !important，这个样式强制每个选中标签占满整行，导致无法横向排列。只需要保留前两个样式，删除第三个样式即可：

.ant-select-selection-search-input {
  width: 100% !important;
}

.ant-select-selection-search {
  width: 100% !important;
}

如果还是存在搜索框宽度不足的情况，可以进一步调整.ant-select-selection-search的flex属性，确保它能占据剩余空间：

.ant-select-selection-search {
  flex: auto !important;
  width: auto !important;
}

.ant-select-selection-search-input {
  width: 100% !important;
}

这样既保证搜索框占满剩余宽度，又不会影响选中标签的正常横向排列。

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