Как полностью изменить дизайн react-select?

Question

[ckatala]

Друзья, помогите!
Использую Select

В документации у них указана такая структура

<div class="react-select">
  <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>

Я хочу переопределить ее и добавить свои className
Как это можно сделать. Всю голову сломал.

Comments

[Егор Живагин]

А почему бы эти классы не стилизовать?

[ckatala]

Егор Живагин, Мне нужна другая структура! Допустим мне не нужен div react-select__menu

[Егор Живагин]

ckatala, там вся либа ориентируется на эту вёрстку и этот каркас. У вас остаётся 3 варианта:
1 - Сделать форк react-select, основательно переписать их код
2 - Взять другую либу
3 - Написать руками простенький компонент-select

[JS Noob]

ckatala, как понять не нужен? Вам дали готовую структуру и изменить её вы не сможете. А вот стилизовать вы можете с помощью добавления стилей к данным классам, либо же можете передать в компонент селекта свой className и написать опираясь на него зависимости по типу такой className .react-select__value-container. А ещё вы можете указать у селекта classNamePrefix и он будет добавлен всем классам внутри компонента. В теории этого вам должно хватать, чтобы получить свой кастомный селект...