如何缩小v2版本React Select组件尺寸至Bootstrap v3标准select高度？

当然有简便方法啦！我之前也遇到过这个问题，调整起来其实挺顺手的，给你两种常用的方案，按需选择就行：

方案一：全局自定义CSS #

直接覆盖React Select的默认样式，匹配Bootstrap v3标准select的尺寸。Bootstrap v3默认select的高度是34px，我们针对React Select的核心元素调整：

/* 调整控件整体高度，匹配Bootstrap默认值 */
.react-select__control {
  min-height: 34px !important;
  height: 34px !important;
  border-color: #ccc; /* 对齐Bootstrap边框色 */
  border-radius: 4px; /* 对齐Bootstrap圆角 */
}

/* 调整选中内容/输入框的内边距，让内容垂直居中 */
.react-select__value-container {
  padding: 0 12px !important;
}

/* 调整下拉选项的内边距，和Bootstrap选项一致 */
.react-select__option {
  padding: 6px 12px !important;
}

/* 调整右侧下拉指示器的内边距，避免错位 */
.react-select__indicator {
  padding: 0 12px !important;
}

/* 可选：匹配Bootstrap的hover/focus状态 */
.react-select__control:hover {
  border-color: #66afe9;
}
.react-select__control--is-focused {
  border-color: #66afe9;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

方案二：组件内联样式（更组件化） #

如果你不想污染全局样式，可以用React Select自带的styles prop，在组件内部自定义样式：

import Select from 'react-select';

// 定义匹配Bootstrap的样式对象
const bootstrapSelectStyles = {
  control: (provided) => ({
    ...provided,
    minHeight: '34px',
    height: '34px',
    borderColor: '#ccc',
    borderRadius: '4px',
    '&:hover': {
      borderColor: '#66afe9'
    },
    '&:focus': {
      borderColor: '#66afe9',
      boxShadow: 'inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6)'
    }
  }),
  valueContainer: (provided) => ({
    ...provided,
    padding: '0 12px'
  }),
  option: (provided) => ({
    ...provided,
    padding: '6px 12px'
  }),
  indicatorContainer: (provided) => ({
    ...provided,
    padding: '0 12px'
  })
};

// 在组件中使用
function MySelect() {
  const options = [
    { value: 'option1', label: '选项1' },
    { value: 'option2', label: '选项2' }
  ];
  
  return <Select styles={bootstrapSelectStyles} options={options} />;
}

小提示 #

• React Select v2的类名前缀是react-select__，如果是其他版本要注意调整类名哦；
• 如果你用的是Bootstrap的不同尺寸（比如input-sm或input-lg），只需要把高度和内边距对应改成20px/46px，内边距也跟着调整就行。

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