Как сохранить API стилей в Select с настроенными компонентами? - PullRequest
Новая
       13

Как сохранить API стилей в Select с настроенными компонентами?

0 голосов
/ 25 июня 2019

Я настраиваю компонент Select из реакции-выбора с помощью пользовательских подкомпонентов (например, SingleValue, DropdownIndicator и т. Д.), И я хочу настроить стиль по умолчанию из стилей реакции-выбора из коробки, ноЯ также хочу сохранить удивительный API стилей.

Сначала я использовал classNames для настройки стилей своих пользовательских компонентов, но когда я обнаружил, что это лишает меня возможности дальнейшего использования API стилей Iвернулся и использовал cx / getStyles в соответствии с документацией реагирования-выбора .Тем не менее, когда я предоставляю className для функции cx, стили в ней имеют приоритет над тем, что я мог бы предоставить в prop.

Например: 

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 пропелле, слились в после стилей, предоставленных "my_custom_single-value_class_name" className, но, похоже, верно и обратное.

Таким образом, мне кажется,чтобы не допустить дальнейшей стилизации моего настраиваемого компонента и пришлось бы создавать совершенно новую обертку вокруг Select каждый раз, когда я хотел новые стили.

...