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

Question

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

Я могу изменить стили ввода input activ-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>

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