多选后如何将React Select箭头图标固定在组件顶部

问题原因 #

React Select 多选模式下，选中项增多会撑高选择器容器，组件默认给下拉箭头、清除按钮这类右侧指示器设置了align-self: center的垂直居中规则，容器高度变大后指示器就会位移到组件中部，无法和顶部输入区域对齐。

修复方案 #

方案1：通过组件自带styles属性局部覆盖（推荐） #

直接在使用Select组件时传入自定义样式配置，修改指示器的对齐规则，不需要写全局CSS，不会影响其他页面的组件实例：

import Select from 'react-select';

const selectStyles = {
  // 下拉箭头容器样式
  dropdownIndicator: (baseStyle) => ({
    ...baseStyle,
    alignSelf: 'flex-start', // 替换默认的center为顶部对齐
    paddingTop: 8, // 调整顶部内边距，和输入框第一行视觉对齐，可根据项目设计稿微调数值
  }),
  // 如果需要同步固定清除按钮位置，加这段配置
  clearIndicator: (baseStyle) => ({
    ...baseStyle,
    alignSelf: 'flex-start',
    paddingTop: 8,
  })
};

// 组件使用时传入styles
<Select
  isMulti
  styles={selectStyles}
  // 其余原有属性：options、value、onChange、placeholder等正常保留
/>

方案2：全局CSS覆盖 #

如果项目里所有React Select都需要统一这个效果，可以直接写全局样式覆盖组件默认类名：

.react-select__dropdown-indicator {
  align-self: flex-start !important;
  padding-top: 8px !important;
}

.react-select__clear-indicator {
  align-self: flex-start !important;
  padding-top: 8px !important;
}

效果参考 #

微调提示：如果箭头和第一行选中项/输入框的对齐有偏差，直接修改paddingTop的数值即可，通常和control容器的顶部内边距保持一致就能达到最佳视觉效果。

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