如何在Styling API中将state作为属性传递给可复用自定义ReactSelect？

你当前的CustomReactSelect采用浅合并样式的写法会直接整段覆盖control样式函数，无法实现仅修改单个属性的需求，可通过两种方式实现需求：

方案1：修改全局CustomReactSelect逻辑（推荐，后续所有使用都支持单属性覆盖） #

调整组件内的样式合并逻辑，改为按样式键深层合并函数返回结果，而非直接覆盖整段样式函数。
修改后的custom-react-select.tsx代码如下：

export const CustomReactSelect = (props) => {
  const defaultStyle = {
    control: (provided, state) => ({
      // 保留原有所有默认样式配置
      ...provided,
      backgroundColor: state.isDisabled ? 'var(--theia-editorGroupHeader-tabsBackground)' : 'var(--theia-input-background)',
      fontSize: 'var(--theia-ui-font-size1)',
      // 其他原有默认配置保留
    }),
    // 其他默认样式（option、menu等）保持原有配置不变
  } 

  // 新增：深层合并默认样式和传入的自定义样式
  const mergedStyles = Object.entries(defaultStyle).reduce((result, [styleKey, defaultStyleFn]) => {
    // 如果用户传入了对应样式键的自定义函数
    if (props.styles?.[styleKey]) {
      const customStyleFn = props.styles[styleKey]
      result[styleKey] = (provided, state) => {
        // 先执行默认函数拿到基础样式，再合并自定义函数返回的覆盖属性
        return {
          ...defaultStyleFn(provided, state),
          ...customStyleFn(provided, state)
        }
      }
    } else {
      // 无自定义配置直接用默认样式
      result[styleKey] = defaultStyleFn
    }
    return result
  }, {})

  return <Select 
    styles={mergedStyles}
    {/* 其他原有透传属性保留 */}
    {...props}
  />
}

覆盖样式写法 #

仅需要返回要修改的backgroundColor属性即可，其他默认样式会自动保留：

const customStyles = {
  control: (provided, state) => ({
    backgroundColor: state.isFocused ? 'red' : 'black'
  })
}

// 传递给组件使用
<CustomReactSelect
  styles={customStyles}
  {/* 其他业务配置 */}
/>

方案2：不修改全局组件，单次使用时手动合并 #

如果不想改动全局组件逻辑，也可以在单次覆盖时手动引入默认样式做合并：

// 先引入全局默认样式配置
import { defaultStyle } from './custom-react-select.tsx'

const customStyles = {
  control: (provided, state) => ({
    // 先展开默认control样式的返回结果，再覆盖需要修改的属性
    ...defaultStyle.control(provided, state),
    backgroundColor: state.isFocused ? 'red' : 'black'
  })
}

// 传递给组件即可
<CustomReactSelect styles={customStyles} />

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