Как настроить параметры выбора реакции

Каков наилучший способ создания компонента " react-select (https://github.com/JedWatson/react-select)?

Я могу настроить таргетинг на сам выбор, с чем-то вроде:

...
import Select from 'react-select'
...
const styles = {
  fontSize: 14,
  color: 'blue',
}
<Select
    options={[1,2,3,4]}
    placeholder={'Select something'}
    clearable={false}
    style={styles.select}
/>

Проблема в том, что фактические параметры, когда выбор расширен, остаются в стиле по умолчанию. Как настроить таргетинг на эти параметры?

Вот пример того, о чем я говорю. Я могу настроить местозаполнитель, но не варианты:

Ответ 1

реагировать выберите v2 (обновление)

Эта новая версия представляет новый styles-api и некоторые другие важные изменения.

Пользовательские Стили

Стиль отдельных компонентов с помощью пользовательских CSS с использованием стилей проп.

const colourStyles = {
  control: styles => ({ ...styles, backgroundColor: 'white' }),
  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: isDisabled ? 'red' : blue,
      color: '#FFF',
      cursor: isDisabled ? 'not-allowed' : 'default',
      ...
    };
  },
  ...
};

export default () => (
  <Select
    defaultValue={items[0]}
    label="Single select"
    options={items}
    styles={colourStyles}
  />
);

Теперь на сайте проекта есть лучшая документация и более наглядные примеры:

https://react-select.com/upgrade-guide#new-styles-api

https://react-select.com/home#custom-styles

https://react-select.com/styles#styles

реакция-выбор v1 (старый ответ - не рекомендуется)

Пользовательские classNames

Вы можете предоставить свой компонент className для компонента, который будет добавлен в базу. Выберите className для внешнего контейнера. Встроенный рендерер параметров также поддерживает пользовательские имена классов.

Добавьте свое собственное имя className в качестве свойства к объектам в массиве параметров:

const options = [
    {label: "one", value: 1, className: 'custom-class'},
    {label: "two", value: 2, className: 'awesome-class'}
    // more options...
];
...
<Select options={options} />

MenuRender

Свойство menuRenderer можно использовать для переопределения раскрывающегося списка параметров по умолчанию.

optionClassName String Имя_класса, которое используется для опций

Пример: response-select/master/src/utils/defaultMenuRenderer.js

Ответ 2

Ответ @btzr верен, и стилизация react-select с помощью классов CSS (относительно) проста.

Однако стилизовать пункты меню сложно, потому что каждый раз, когда вы открываете меню и пытаетесь проверить элементы, меню снова закрывается.

Помогает (временно) указать параметр menuIsOpen={true}, который будет держать меню открытым для более удобной проверки.

Ответ 3

У меня есть стиль использования:

const options = [
    {label: "one", value: 1, style: { color: 'red' }},
    {label: "two", value: 2, style: { color: 'blue' }}
    // more options...
];
...
<Select options={options} />

Ответ 4

const CustomStyle = {
  option: (base, state) => ({
    ...base,
    backgroundColor: state.isSelected ? {Color1} : {Color2},
  })
}
<Select styles={customStyle} >

Для этого есть больше вариантов. Посмотрите документацию по стилю.

https://react-select.com/styles