如何在具有自定义组件的Select中保留样式API？

Question

我正在使用自定义子组件（例如SingleValue，DropdownIndicator等）从react-select定制Select组件，并且我想从react-select的即用型样式中定制默认样式，但我也想保留很棒的Styles API。

起初，我使用classNames自定义自定义组件的样式，但是当我发现无法使用样式API时，我又回过头来使用cx / getStyles per the react-select documentation。但是，当我向cx函数提供className时，其中的样式优先于我在样式道具中可能提供的任何样式。

例如：

import { css } from 'emotion';

<Select
  ...aLotOfProps
  styles={{
    singleValue: provided => {
      ...provided,
      color: "pink"
    }
  }}
  components={{
    SingleValue: {cx, getStyles, children, ...rest} => (
      <div className={cx(
         css(getStyles("singleValue", rest)),
         {},
         "my_custom_single-value_class_name"
       )}
      >
        {children}
      </div>
    ),
  }}

我希望styles道具中提供的样式在{em>之后中由"my_custom_single-value_class_name" className提供的样式合并，但相反似乎是正确的。 / p>

因此，我似乎无法进一步设计自定义组件的样式，每次想要新样式时，都必须在Select周围做一个全新的包装。