Используйте Bootstrap "prepend" с реагировать на выбор

Question

Я пытаюсь использовать Bootstrap input-group-prepend с реакцией-выбором, однако стиль реакции-выбора, похоже, не является текущей начальной загрузкой / реакцией-ремнем и поэтому не хочет работать вместе.

Поле выбора не сливается с элементом prepend (радиус 4px по всем углам, а не только по правым углам), также тень блока на элементе полностью отличается от того, что использует bootstrap 4, это создает раздражающая проблема согласованности.

Это дает желаемый внешний вид и остается неизменным при использовании .map для параметров.

  <InputGroup className="mb-3">
     <InputGroupAddon addonType="prepend">
        <InputGroupText><FaBriefcaseMedical /></InputGroupText>
     </InputGroupAddon>
     <Input type="select" name="select" id="ConsultantSelect">
        <option value="" value disabled selected>Select Consultant</option>
        <option>Roland Deschain</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
     </Input>
  </InputGroup>

Это, однако, использует ответ-выбор не отображается, как ожидалось / желательно

<InputGroup className="mb-3">
  <InputGroupAddon addonType="prepend">
      <InputGroupText><FaHSquare /></InputGroupText>
  </InputGroupAddon>
  <Select
    options={this.state.hospitals}
    name={this.state.hospitals}
  />                                            
</div>

Иконография важно то, что я делаю из-за целевой аудитории. РЕДАКТИРОВАТЬ:

хитрый обходной путь заключается в том, чтобы дать реактив-выберите className="form-control", а затем затем стилизуйте его в соответствии с Bootstrap4.

<InputGroup className="mb-3">
  <InputGroupAddon addonType="prepend">
     <InputGroupText><FaHSquare /></InputGroupText>
  </InputGroupAddon>
  <Select className="form-control"
    options={this.state.hospitals}
    name={this.state.hospitals}
  />                                            
</InputGroup>

.css-2b097c-container {
    padding: 0px;
}

.css-yk16xz-control {
    background-color: #ffffff00 !important;
    border-style: none !important;
}

.css-1pahdxg-control {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

Но это явно не идеальное решение.

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

Answer 1

У меня такой же вариант использования, как и у вас. Только я обернул Select в div с определенным стилем% width.

Однако это должно быть установлено для размера экрана. Это приведет к смещению правой стороны, если% слишком мал, или создаст новую строку, если% слишком велик.

<InputGroup className='mt-1'>
  <InputGroupAddon addonType="prepend">
    <InputGroupText>Select</InputGroupText>
  </InputGroupAddon>
  <div style={{width: '80%'}}>
    <Select isMulti name='subjects'
      options={optionsArray}
      placeholder="Click or type"
    />
  </div>
</InputGroup>