Как уменьшить размер React Select в v2

Question

Новый v2 control-select управления великолепен, но по умолчанию слишком велик. Есть ли (желательно) простой способ уменьшить высоту до уровня стандартного элемента управления select (используя Bootstrap v3)?

Answer 1

React-Select v2 использует эмоции CSS-in-JS, поэтому новый способ управления стилем над выбранными компонентами и подкомпонентами заключается в передаче объекта стиля в styles двигательный Вы также можете установить className для стиля с внешней таблицей стилей.

Подробнее / Лучшая информация ЗДЕСЬ

CSS-in-JS

const customControlStyles = base => ({
    height: 50,
});

<Select ... styles={control: customControlStyles} ... />

CSS Way

<Select ... className="myClassName" ... />

.myClassName__control {
    height: 50px;
}

Answer 2

Попробуйте передать значение для реквизита maxMenuHeight:

<Select
  maxMenuHeight={190}
/>

см документацию

Answer 3

Настройка height Свойство выглядит так, как будто оно сохраняет эту высоту, даже если у вас есть переполнение (из нескольких выбранных значений, выпадающих на следующую строку), так что в итоге значения выходят за пределы поля.

Я решил эту проблему, установив верхний и нижний отступы на dropdownIndicator и clearIndicator и настройка minHeight на control вот так:

const styles = {
  control: (base) => ({
    ...base,
    minHeight: 32,
  }),
  dropdownIndicator: (base) => ({
    ...base,
    paddingTop: 0,
    paddingBottom: 0,
  }),
  clearIndicator: (base) => ({
    ...base,
    paddingTop: 0,
    paddingBottom: 0,
  }),
};

<Select styles={styles}/>

Answer 4

Добавляя к тому, что прокомментировал @craigmichaelmartin, minHeight на control важно перезаписать, и его нужно установить в кучу мест, чтобы по-настоящему его преодолеть.
Вот что сработало для меня, чтобы он соответствовал высоте элемента ввода текста размером 36px (эти настройки также работают в css, конечно)

const customStyles = {
  container: (provided) => ({
    ...provided,
    display: 'inline-block',
    width: '250px',
    minHeight: '1px',
    textAlign: 'left',
    border: 'none',
  }),
  control: (provided) => ({
    ...provided,
    border: '2px solid #757575',
    borderRadius: '0',
    minHeight: '1px',
    height: '42px',
  }),
  input: (provided) => ({
    ...provided,
    minHeight: '1px',
  }),
  dropdownIndicator: (provided) => ({
    ...provided,
    minHeight: '1px',
    paddingTop: '0',
    paddingBottom: '0',
    color: '#757575',
  }),
  indicatorSeparator: (provided) => ({
    ...provided,
    minHeight: '1px',
    height: '24px',
  }),
  clearIndicator: (provided) => ({
    ...provided,
    minHeight: '1px',
  }),
  valueContainer: (provided) => ({
    ...provided,
    minHeight: '1px',
    height: '40px',
    paddingTop: '0',
    paddingBottom: '0',
  }),
  singleValue: (provided) => ({
    ...provided,
    minHeight: '1px',
    paddingBottom: '2px',
  }),
};

Answer 5

Из аналогичного вопроса также на SO вы можете изменить react-selectтему, чтобы изменить высоту элемента управления. Мне кажется проще, чем другие ответы.

      const customThemeFn = (theme) => ({ 
  ...theme,
  spacing: {
    ...theme.spacing,
    controlHeight: 30,
    baseUnit: 2
  }
})

<Select theme={customThemeFn}> ... </Select>

Подробнее см. Theme modifier methodна этой странице документов .

Answer 6

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

const customStyles = {
  input: styles => {
    return {
      ...styles,
      height: '1.8em'
  };
}
const App = () => (
  <Select
    styles={customStyles}
    options={...}
  />
);

Answer 7

Еще один способ CSS

Вы также можете указать classNamePrefix и используйте его для переопределения стилей CSS.

<Select classNamePrefix="mySelect" />

.mySelect__value-container{
 height: 35px;
}

Answer 8

Я получил ответ. Я думаю, что следующие минимальные настройки. Я мог бы уменьшитьhightреакции выбора.

Это код, я использовал TypeScript для этого кода.

      const targetHeight = 30;

const styles = {
  control: (base: any) => ({
    ...base,
    minHeight: 'initial',
  }),
  valueContainer: (base: any) => ({
    ...base,
    height: `${targetHeight - 1 - 1}px`,
    padding: '0 8px',
  }),
  clearIndicator: (base: any) => ({
    ...base,
    padding: `${(targetHeight - 20 - 1 - 1) / 2}px`,
  }),
  dropdownIndicator: (base: any) => ({
    ...base,
    padding: `${(targetHeight - 20 - 1 - 1) / 2}px`,
  }),
};

      <Select
  styles={styles}
/>