reactjs - 使用 Bootstrap "prepend"和 react-select

Question

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

选择框不会与前置元素合并(所有角上的半径为 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。

<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 包装在一个带有“form-control”类的 div 中。它还需要一个零填充。

<div className="react-select form-control p-0">
    <Select />
</div>

Select 中的第一个 div 也需要 -1px 的边距。

.react-select > div {
    margin: -1px;
}