Как мне стиль компонента React-Select получить следующую структуру? - PullRequest
Новая
       47

Как мне стиль компонента React-Select получить следующую структуру?

0 голосов
/ 17 января 2019

Я пытаюсь добавить пользовательский CSS в компонент React select.

, который в настоящее время похож на 

<Select styles={styles} options={options} />

То, что я хочу сделать, это

enter image description here

То, что я реализовал, выглядит следующим образом

enter image description here

Итак, любой может помочь мне сэто?

1 Ответ

0 голосов
/ 18 января 2019

Для достижения вашего стиля вам нужно использовать комбинацию пользовательских styles и components, например: 

const styles = {
  container: base => ({
    ...base,
    flex: 1
  }),
  control: base => ({
    ...base,
    boxShadow: '10px 10px 5px -6px rgba(0,0,0,0.46)',
  }),
  indicatorSeparator: base => ({
    ...base,
    display: 'none'
  }),
  placeholder: base => ({
    ...base,
    color: 'blue'
  })
};

const Placeholder = (props) => {
  return (
    <components.Placeholder {...props}>
    None selected
    </components.Placeholder>
  );
};

<Select styles={styles} components={{Placeholder}} options={options} />

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

...