修改React-Select样式后下拉箭头异常，寻求解决方案

我是React-Select的新手，修改组件样式后下拉箭头出现异常。花费3小时查找箭头位置控制方法无果，仅找到替换箭头的方案但无法解决问题，目前正考虑是否放弃该库从零开发下拉组件。

当前效果：

期望效果：

相关代码 #

React 组件代码 #

import Select from "react-select";

interface DropdownV2 {
  color?: string[];
  options: string[];
  name: string;
}

export const DropdownV2: React.FC<DropdownV2> = ({ color, options, name }) => {
  let optionsList: any[] = [];

  options.map((option) => {
    optionsList.push({ label: option, value: option });
  });

  return (
    <Select
      defaultValue={options[0]}
      isMulti={false}
      placeholder={"Choose " + name}
      styles={customStyles}
      options={optionsList}
    />
  );
};
const customStyles = {
  option: (provided: any, state: { isSelected: any }) => ({
    ...provided,
    borderBottom: "1px solid #e9e9e2",
    borderLeft: "1px solid #e9e9e2",
    borderRight: "1px solid #e9e9e2",
    borderRadius: "4px",
    color: state.isSelected ? "#290363" : "#150132",
    backgroundColor: state.isSelected ? "#e9e9e2" : "white",
    cursor: "pointer",
    padding: 20,
  }),
  control: () => ({
    // none of react-select's styles are passed to <Control />
    width: 200,
  }),
  menu: (provided: any) => ({
    ...provided,
    border: "1px solid #e9e9e2",
  }),
  placeholder: (base: any) => ({
    ...base,
    color: "#150132",
    fontFamily: "inter",
    fontStyle: "normal",
    fontWeight: "400",
    fontSize: "14px",
    lineHeight: "24px",
    boxSizing: "border-box",
    border: "1px solid #150132",
    borderRadius: "4px",
    padding: "12px 18px",
    gap: "10px",
  }),
  singleValue: (provided: any, state: { isDisabled: any }) => {
    const opacity = state.isDisabled ? 0.5 : 1;
    const transition = "opacity 300ms";
    const width = "100%";
    const height = "50px";
    const textAlign = "left";
    const fontFamily = "inter";
    const fontStyle = "normal";
    const fontWeight = "400";
    const fontSize = "14px";
    const lineHeight = "24px";
    const boxSizing = "border-box";
    const display = "block";
    const flexDirection = "row";
    const justifyContent = "space-between";
    const alignItems = "center";
    const padding = "12px 18px";
    const gap = "10px";
    const border = "1px solid #150132";
    const borderRadius = "4px";
    const flex = "none";
    const order = "0";
    const alignSelf = "stretch";
    const flexGrow = "0";
    const backgroundPositionX = "244px";
    const marginBottom = "10px";

    return {
      ...provided,
      opacity,
      transition,
      border,
      width,
      height,
      textAlign,
      padding,
      fontFamily,
      fontStyle,
      fontWeight,
      fontSize,
      lineHeight,
      boxSizing,
      display,
      flexDirection,
      justifyContent,
      alignItems,
      gap,
      borderRadius,
      flex,
      order,
      alignSelf,
      flexGrow,
      backgroundPositionX,
      marginBottom,
    };
  },
};

依赖脚本 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

问题分析与解决方案 #

问题根源在样式配置的两个关键错误：

1. control 样式完全抛弃默认继承，未保留display: flex等核心布局属性，导致内部下拉箭头（dropdownIndicator）与选择内容无法正确排列。
2. 本该给control容器的边框、内边距等样式被错误加到singleValue上，挤压了箭头的显示空间。

修改后的样式配置如下：

const customStyles = {
  option: (provided: any, state: { isSelected: any }) => ({
    ...provided,
    borderBottom: "1px solid #e9e9e2",
    borderLeft: "1px solid #e9e9e2",
    borderRight: "1px solid #e9e9e2",
    borderRadius: "4px",
    color: state.isSelected ? "#290363" : "#150132",
    backgroundColor: state.isSelected ? "#e9e9e2" : "white",
    cursor: "pointer",
    padding: 20,
  }),
  // 修正control样式：继承默认布局，添加容器样式
  control: (provided: any) => ({
    ...provided,
    width: 200,
    border: "1px solid #150132",
    borderRadius: "4px",
    padding: "0 18px",
    height: 50,
    alignItems: "center",
  }),
  menu: (provided: any) => ({
    ...provided,
    border: "1px solid #e9e9e2",
  }),
  placeholder: (base: any) => ({
    ...base,
    color: "#150132",
    fontFamily: "inter",
    fontStyle: "normal",
    fontWeight: "400",
    fontSize: "14px",
    lineHeight: "24px",
    margin: 0, // 去掉默认margin避免错位
  }),
  singleValue: (provided: any, state: { isDisabled: any }) => {
    const opacity = state.isDisabled ? 0.5 : 1;
    const transition = "opacity 300ms";

    return {
      ...provided,
      opacity,
      transition,
      fontFamily: "inter",
      fontStyle: "normal",
      fontWeight: "400",
      fontSize: "14px",
      lineHeight: "24px",
      color: "#150132",
      margin: 0,
    };
  },
  // 可选：调整箭头的位置和样式
  dropdownIndicator: (provided: any) => ({
    ...provided,
    padding: 0,
    color: "#150132",
  }),
};

关键修改点：

• control 保留...provided继承默认flex布局，将边框、高度、内边距移到此处
• 清空singleValue中多余的布局、边框、padding属性，仅保留文字样式
• 调整placeholder的margin避免错位
• 添加dropdownIndicator样式控制箭头的间距和颜色

修改后箭头会回到正确位置，与期望效果一致，无需放弃react-select从零开发。

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