Как я могу удалить планку в ответной реакции?

Question

Я пытаюсь улучшить свой интерфейс для реагировать на выбор. Я провел некоторые исследования в Интернете, но я до сих пор не могу понять, как убрать панель выбора.

Можно ли стилизовать элемент управления для удаления панели? Как?

import React from 'react';
import chroma from 'chroma-js';

import { colourOptions } from './docs/data';
import Select from 'react-select';

const dot = (color = '#ccc') => ({
  alignItems: 'center',
  display: 'flex',

  ':before': {
    backgroundColor: color,
    borderRadius: 10,
    content: ' ',
    display: 'block',
    marginRight: 8,
    height: 10,
    width: 10,
  },
});

const colourStyles = {
  control: styles => ({ ...styles, backgroundColor: 'white' }),
  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: isDisabled
        ? null
        : isSelected ? data.color : isFocused ? color.alpha(0.1).css() : null,
      color: isDisabled
        ? '#ccc'
        : isSelected
          ? chroma.contrast(color, 'white') > 2 ? 'white' : 'black'
          : data.color,
      cursor: isDisabled ? 'not-allowed' : 'default',
    };
  },
  input: styles => ({ ...styles, ...dot() }),
  placeholder: styles => ({ ...styles, ...dot() }),
  singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) }),
};

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

Answer 1

Реакция выбора позволяет нам управлять компонентами, выполняя

components={{
  IndicatorSeparator: () => null
}}

Например:

<Select
  id="search-commodity"
  options={comodityOptions}
  components={{
    IndicatorSeparator: () => null
  }}
/>

Answer 2

Компонент, который вы ищете стиль indicatorSeparator, Например, добавьте это в ваши стили:

indicatorSeparator: (styles) => ({display:'none'})

Как я это узнал? Я добавил classNamePrefix к свойствам реагировать на выбор, а затем использовал инспектор, чтобы увидеть, каково имя класса элемента.

Answer 3

      import Select from "react-select";

export default () => (
  <Select
    styles={{
      indicatorSeparator: () => ({ display: "none" }),
    }}
  />
)

Вы можете скрыть индикаторSeparator с помощью стилей . Будьте в курсе! НетIndicatorSeparatorноindicatorSeparator.