Изменение высоты компонента response-select

Я использую компонент response-select вместе с bootstrap v4

Кажется, все элементы начальной загрузки основаны на высоте 35 пикселей, высота компонента react-select по умолчанию составляет 38 пикселей, что выглядит немного странно.

Есть идеи, как изменить высоту компонента?

Он использует какую-то странную библиотеку стилей JS, с которой я никогда раньше не сталкивался. Мне удалось заставить его имитировать контур при фокусировке, используя его, но высота ускользает от меня, любая помощь очень приветствуется

Вы можете поиграть с ним здесь


reactjs react-select
person DrogoNevets    schedule 16.01.2019    source источник

Ответы (7)


arrow_upward
19
arrow_downward

Вы можете добавить свои стили к любой части выбранных компонентов, взгляните на соответствующий документы

вот рабочая демонстрация того, о чем вы просите.

В вашем случае код, который вам нужно добавить, будет выглядеть примерно так:

const customStyles = {
  control: base => ({
    ...base,
    height: 35,
    minHeight: 35
  })
};

и в выбранном компоненте:

<Select
          className="basic-single"
          classNamePrefix="select"
          defaultValue={colourOptions[0]}
          isDisabled={isDisabled}
          isLoading={isLoading}
          isClearable={isClearable}
          isRtl={isRtl}
          isSearchable={isSearchable}
          name="color"
          options={colourOptions}
          styles={customStyles}
 />
person Erez Lieberman    schedule 16.01.2019
comment
как вы можете видеть, когда вы уменьшаете высоту только элемента управления до значения менее ~ 34 пикселей, это фактически не уменьшает размер каких-либо других компонентов. Мне нужно, и я предполагаю, что оригинальный плакат должен уменьшить высоту элемента управления, сохраняя значение по центру по вертикали, x с правой стороны и т. Д. Я хочу уменьшить высоту всего, чтобы он был меньше прямоугольника - person Dan; 14.11.2019
comment
Как за это проголосовали и приняли? Это буквально первое, что кто-то может подумать попробовать, и это не работает ... - person Slbox; 09.04.2020
comment
Было бы более продуманно, если бы компонент мог реагировать на обычные классы управления формой начальной загрузки для изменения размера и т. Д. - person geobudex; 30.09.2020

arrow_upward
38
arrow_downward

Потратив часы, я получаю это, чтобы получить точную высоту 30 пикселей для выбора реакции с границей 1 пиксель:

  const customStyles = {
    control: (provided, state) => ({
      ...provided,
      background: '#fff',
      borderColor: '#9e9e9e',
      minHeight: '30px',
      height: '30px',
      boxShadow: state.isFocused ? null : null,
    }),

    valueContainer: (provided, state) => ({
      ...provided,
      height: '30px',
      padding: '0 6px'
    }),

    input: (provided, state) => ({
      ...provided,
      margin: '0px',
    }),
    indicatorSeparator: state => ({
      display: 'none',
    }),
    indicatorsContainer: (provided, state) => ({
      ...provided,
      height: '30px',
    }),
  };
person Jivan    schedule 29.03.2020
comment
Что ... предусмотрено? - person Kelvijn; 02.07.2020
comment
При условии, что предоставлены стили из react-select, если вы не распространите их, вы не получите стили по умолчанию для других свойств. - person Eduardo Portet; 30.11.2020
comment
Хорошая вещь. Работал как шарм. - person Aravind Reddy; 28.05.2021
comment
Большое спасибо @Jivan - person NhutLe; 02.06.2021
comment
к сожалению, это отключает рост компонента, когда это Multi-select и есть несколько строк выбранных элементов - person Fre Timmerman; 28.07.2021

arrow_upward
5
arrow_downward

Мне едва удалось сделать компонент Select размером всего 32 пикселя (в моем браузере) с помощью атрибута theme. Он хорошо работает, когда высота больше 45 пикселей. Вы также можете опустить атрибут baseUnit.

Это не сработало для небольших размеров.

  const theme = (theme: Theme) => ({
    ...theme,
    spacing: {
      ...theme.spacing,
      controlHeight: 30,
      baseUnit: 0,
    }
  });

<Select options={props.options} theme={theme}/>
person ruwan800    schedule 09.12.2020
comment
Этот ответ подходит мне лучше всего, за исключением того, что я предпочитаю baseUnit равным 2: const customThemeFn = (theme) = ›({... theme, spacing: {... theme.spacing, controlHeight: 30, baseUnit: 2}}) - person Kevin Ashworth; 27.12.2020

arrow_upward
4
arrow_downward

CSS Way

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

<Select classNamePrefix="mySelect" />

.mySelect__value-container{
 height: 35px;
}
person Sined Yuk    schedule 15.01.2020

arrow_upward
4
arrow_downward

Причина, по которой вы не можете сделать его меньше 36 пикселей, заключается в том, что dropdownIndicator и indicatorContainer (отображается значок очистки) имеют отступ 20 пикселей (значок) + 8 пикселей со всех сторон. Если вы уменьшите это заполнение, minHeight действительно будет работать.

dropdownIndicator: (styles) => ({
    ...styles,
    paddingTop: 7,
    paddingBottom: 7,
}),
clearIndicator: (styles) => ({
    ...styles,
    paddingTop: 7,
    paddingBottom: 7,
}),

Вы можете поиграть с заполнением dropdownIndicator и clearIndicator.

Я заметил, что вы не можете опуститься ниже 30 пикселей в minHeight из-за valueContainer, если вы не измените его высоту / отступ.

person Bassem    schedule 10.12.2020
comment
этот ответ + @ erez-lieberman идеально подходит для высоты менее 36 пикселей - person Facundo Pedrazzini; 15.12.2020

arrow_upward
3
arrow_downward

Мне удалось переписать стиль css списка меню:

    /* over write css in react-select module */
    .Select__menu-list {
      max-height: 120px !important;
    }

person Nova Qiu    schedule 26.07.2019
comment
Хотя этот CSS может помочь вам с высотой раскрывающегося раскрывающегося списка, он не меняет высоту элемента управления, что является темой этого SO. - person Kevin Ashworth; 27.12.2020

arrow_upward
2
arrow_downward

Если вы хотите только изменить размер окна, используйте это.

.create-select {
    width: 160px;
    float: right;
    color: #000;
    [class$="ValueContainer"] {
        min-height: 28px !important;
        max-height: 28px;
    }
    [class$="IndicatorsContainer"] {
        min-height: 28px !important;
        max-height: 28px;
    }
    [class$="-Input"] {
        min-height: 28px !important;
        max-height: 28px;
        padding: 0px;
    }
    [class$="-control"] {
        min-height: 28px !important;
        max-height: 28px;

    }
}
person Efren Valdez    schedule 02.08.2020