花了几个小时，我最终得到了精确的 30px 高度的 react select with border 1px：

  const customStyles = {
    control: (provided, state) => ({
      ...provided,
      background: '#fff',
      borderColor: '#9e9e9e',
      minHeight: '30px',
      height: '30px',
      boxShadow: state.isFocused ? null : null,
    }),

    valueContainer: (provided, state) => ({
      ...provided,
      height: '30px',
      padding: '0 6px'
    }),

    input: (provided, state) => ({
      ...provided,
      margin: '0px',
    }),
    indicatorSeparator: state => ({
      display: 'none',
    }),
    indicatorsContainer: (provided, state) => ({
      ...provided,
      height: '30px',
    }),
  };

您可以将样式添加到选择组件的任何部分，查看相关文档

这是您要求的工作演示。

在您的情况下，您需要添加的代码如下所示：

const customStyles = {
  control: base => ({
    ...base,
    height: 35,
    minHeight: 35
  })
};

并在选择组件中：

<Select
          className="basic-single"
          classNamePrefix="select"
          defaultValue={colourOptions[0]}
          isDisabled={isDisabled}
          isLoading={isLoading}
          isClearable={isClearable}
          isRtl={isRtl}
          isSearchable={isSearchable}
          name="color"
          options={colourOptions}
          styles={customStyles}
 />

我几乎无法使用该属性使Select组件小到 32px（在我的浏览器中）theme。当高度大于 45px 时效果很好。您也可以省略该baseUnit属性。

它不适用于小尺寸。

  const theme = (theme: Theme) => ({
    ...theme,
    spacing: {
      ...theme.spacing,
      controlHeight: 30,
      baseUnit: 0,
    }
  });

<Select options={props.options} theme={theme}/>

您无法将其设置为小于36 像素的原因是dropdownIndicator和indicatorContainer（显示清除图标）在所有边上都采用 20 像素（图标）+ 8 像素的填充。如果您减少填充，minHeight实际上会起作用。

dropdownIndicator: (styles) => ({
    ...styles,
    paddingTop: 7,
    paddingBottom: 7,
}),
clearIndicator: (styles) => ({
    ...styles,
    paddingTop: 7,
    paddingBottom: 7,
}),

您可以使用dropdownIndicatorand的填充clearIndicator。

我注意到你不能在 minHeight 中低于 30px 因为valueContainer，除非你改变它的高度/填充。