结合使用Bootstrap“ prepend”和react-select

Question

我正在尝试将Bootstrap input-group-prepend与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。

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

Answer 2

我和您有相同的用例。只有我将Select包装在定义了％宽度样式的div中。

但是，必须为屏幕尺寸设置此值。如果％太小，则会导致右侧未对齐；如果％太大，则会创建新行。

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