не удалось настроить стиль реакции-выбора для начальной загрузки sm

Я использую множественный выбор реакции-выбора ( https://www.npmjs.com/package/react-select ). Я использую bootstrap 4 для стилизации в своем проекте. Я хочу реагировать на выбор размера sm, как в бутстрапе. Я попытался перейти ниже к стилю в реакции-выборе.

const customStyles = {
  control: () => ({
    height: 'calc(1.5em + .5rem + 2px)',
    padding: '.25rem .5rem',
    fontSize: '.875rem',
    lineHeight: '1.5',
    borderRadius: '.2rem'
  })
}

Это стили класса form-control-sm из бутстрапа. Итак, в основном я хочу, чтобы размер реакции-выбора был таким же, как размер = см в элементе управления формой начальной загрузки.

Именно я хочу https://getbootstrap.com/docs/4.0/components/forms/#select-menu здесь class=custom-select custom-select-sm


reactjs javascript css react-select bootstrap-4
person Ruturaj More    schedule 10.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете попробовать стиль ниже:

const customStyles = {
container:  (provided, state) => ({
  ...provided,
  padding: '0',
  border: '0',
  fontSize: '0.65625rem',
}),
control:  (provided, state) => ({
  ...provided,
  height: 'calc(1.5em + 0.5rem + 2px)',
  minHeight: 'calc(1.5em + 0.5rem + 2px)',
  fontSize: '0.65625rem',
  borderColor: '#d8dbe0',
  boxShadow: 'inset 0 1px 1px rgba(0, 0, 0, 0.075)',
  transition: 'background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out',
  ':hover': {
    borderColor: state.isFocused ? '#66afe9' : '#d8dbe0',
    boxShadow: state.isFocused ? 
      'inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6)' : 
      'inset 0 1px 1px rgba(0, 0, 0, 0.075)',
  }
}),
valueContainer: (provided, state) => ({
  ...provided,
  marginTop: '0',
  marginLeft: '6px',
  padding: '0',
  border: '0',
}),
dropdownIndicator: (provided, state) => ({
  ...provided,
  marginTop: '0',
  padding: '0',
  border: '0',
  width: '16px',
}),
clearIndicator: (provided, state) => ({
  ...provided,
  marginTop: '0',
  padding: '0',
  border: '0',
  width: '16px',
}),
indicatorsContainer: (provided, state) => ({
  ...provided,
  paddingRight: '4px',
  border: '0',
}),

}

person Ramil Matira    schedule 14.04.2021