将 Bootstrap“前置”与反应选择一起使用

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>

然而，使用反应选择不会按预期/期望显示

<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;
}