реагировать выберите удаление границы и тени блока - PullRequest
Новая
       5

реагировать выберите удаление границы и тени блока

0 голосов
/ 13 июля 2020

Я пытаюсь переопределить css div опций выбора реакции, поэтому в последней версии response-select v2 мы можем передать его как стили 

 <Select
    styles={{
      option: (provided) => ({
        ...provided,
        backgroundColor: '#fff',
        border: null, // tried border: 'none'
        boxShadow: null, // tried border: 'none'
        outline: 0
      }),
    }}
  />;

Я пытаюсь удалить границу , попробовал с помощью приведенного выше фрагмента, но граница и тень остаются такими же

также при нажатии на выбор мне нужно переопределить синий цвет фона во время щелчка

как я могу достичь этого

1 Ответ

1 голос
/ 13 июля 2020

Если вы хотите удалить границу всего списка опций, вам необходимо установить стиль для компонента menu, а не для option компонента.

Кроме того, для переопределения стиля компонента Select input вам необходимо установить стиль для control component

Вы можете попробовать сделать это - 

<Select
  styles={{
    control: (provided, state) => ({
      ...provided,
      boxShadow: "none",
      border: state.isFocused && "none"
    }),
    menu: (provided, state) => ({
      ...provided,
      border: "none",
      boxShadow: "none"
    }),
    option: (provided, state) => ({
       ...provided,
       backgroundColor: state.isFocused && "lightgray",
       color: state.isFocused && "red"
    })
  }}
  ...
/>

Вот список компонентов, которые будут использоваться для установки стилей в react-select - https://react-select.com/styles#style -объект

...