styled-components snippet for react-select

sc-for-react-select.js

// styled:

import Select from 'react-select'

export const Select = css`
  & .gideon__control {
    background-color: #FFF;
    border-color: #E7E7E7;
  }

  & .gideon__value-container {
    padding: 2px 12px;
  }

  & .gideon__placeholder {
    font-size: 14px;
    line-height: 17px;
    color: #969696;
  }

  & .gideon__indicator-separator {
    display: none;
  }

  & .gideon__dropdown-indicator {
    svg {
      path {
        fill: #2310FA;
      }
    }
  }

  & .gideon__single-value {
    font-size: 14px;
    line-height: 17px;
  }

  // etc from api doc
  /* <div class="react-select-container">
    <div class="react-select__control">
      <div class="react-select__value-container">...</div>
      <div class="react-select__indicators">...</div>
    </div>
    <div class="react-select__menu">
      <div class="react-select__menu-list">
        <div class="react-select__option">...</div>
      </div>
    </div>
  </div> */
`

export const Boots = styled(Select)`
  width: 100%;
  margin: 0 0 10px;

  ${Select};
`

// JSX:

<Boots
  classNamePrefix='gideon'
  noOptionsMessage={() => 'Не найдено!'}
/>