使用Bootstrap“ prepend”和react-select

Question

我正在尝试将Bootstrap输入组前缀与react-select一起使用，但是react-selects的样式似乎不是当前的bootstrap / reactstrap，因此不想一起工作。

选择框不会与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>

但是，这正在使用react-select不会按预期/期望显示

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

基于目标受众，对于我正在从事的工作而言，影像学很重要。编辑：

麻烦的解决方法是给react-select className="form-control"，然后设置其样式以匹配Bootstrap4。

.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

使用flex-grow占用父级的剩余空间：

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

我在这里使用了引导实用程序类flex-grow-1，但是您可以使用任何喜欢的样式应用方法。