Как мне изменить стили контейнера ввода

Question

Я просмотрел документы и не могу найти какой-либо способ изменить стили этого контейнера ввода.

Я могу изменить стили ввода input response-select__input, но родительский элемент просто недоступен, если толькоЯ использую это конкретное имя класса.

Единственный другой способ - использовать value-container > div:last-child Но это просто плохая идея, нет, для этого сценария я иногда меняю компоненты.

Я бы хотеллюблю использовать это имя класса css-15n6m, но оно меняется с каждой версией пакета из моего опыта до сих пор

Answer 1

React-Select использует EmotionJ для стилизации, и можно передать стили переопределения для любого внутреннего компонента.Скажем, например, я хотел переопределить базовый стиль элемента управления Menu.Я мог бы предоставить метод для этого:

const menuStyles = (base, state) => {
  const { menuIsOpen } = state.selectProps;
  let addons = {
    border: '1px solid #ccc',
    zIndex: 1000,
    marginTop: 0
  };
  if (menuIsOpen) {
    addons = Object.assign(addons, {
      borderTopLeftRadius: 0,
      borderTopRightRadius: 0,
      borderTop: 0,
      boxShadow: '0 4px 5px rgba(0, 0, 0, .15)'
    });
  }
  return Object.assign(base, addons);
};

// ...
<Select styles={{menu: menuStyles}} />

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

Примечание: Кикер пытается выяснить, какой Component является компонентом, который вы действительно хотите стилизовать.Компонент Input не является вводом HTML.Единственный, используемый с React-Select - это скрытый элемент управления.Скорее всего, вы пытаетесь стилизовать один из множества элементов Контейнера, составляющих видимый элемент управления, например SelectContainer, ValueContainer или, возможно, MultiValueContainer.Как я уже сказал, вам нужно немного поиграть, но вы можете сделать это.В документации также есть хорошая документация по компонентам.

Answer 2

Что именно вы пытаетесь стилизовать?Фон?Поля?Ширина?Высота?

Можете ли вы привести пример того, чего вы пытаетесь достичь?

Кроме того, вы можете добавить CSS прямо в тег, например:

<div style="width:10px;height:20px;background-color:#b10000;"></div>

Нобез ссылки на класс или идентификатор вы не сможете индивидуально изменить стиль тега (элемента).