使用 Bootstrap "prepend" 和 react-select

Question

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

select 框不与前置元素合并（所有角的半径为 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 不显示为 expected/desired

<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 更改导致以下结果，现在下拉菜单与正常 select 输入相同，并且还匹配其他输入，例如文本输入。

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>

Answer 2

对我有用的是用 class“表单控件”将 Select 包裹在 div 中。它还需要一个零填充。

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

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

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

使用 Bootstrap "prepend" 和 react-select

Use Bootstrap "prepend" with react-select

reactjs

react-select

bootstrap-4

reactstrap