React Select组件顶部出现大红色边距的原因咨询

问题根源 #

你错误地将React Select用于显示选中值的SingleValue组件，替换成了基于下拉选项组件Option实现的CustomOption1。Option是专门为下拉菜单里的选项设计的，自带默认样式（比如内边距、焦点状态的红色样式），这些样式和SingleValue的布局逻辑完全不匹配，直接导致了顶部出现异常的红色边距。

解决方法 #

1. 重新定义自定义的SingleValue组件，基于原生的components.SingleValue而非Option来实现：

const CustomSingleValue = ({ children, ...props }) => (
  <components.SingleValue {...props}>
    <strong>{children} hello</strong>
    <span style={{ color: "blue" }}>abv</span>
    <button>hello</button>
  </components.SingleValue>
);

2. 在React Select的components配置中替换正确的组件：

components={{
  DropdownIndicator,
  Option: CustomOption,
  SingleValue: CustomSingleValue // 这里使用新定义的组件
}}

另外，你当前的singleValue自定义样式里设置了marginBottom: "12px"，如果不需要可以调整，避免影响整体布局。

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