使用Bootstrap“ prepend”和react-select

问题描述 投票:0回答:1

我正在尝试将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>

enter image description here

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

麻烦的解决方法是给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更改结果显示在下面,该下拉菜单现在看起来与普通选择输入相同,并且还与其他输入(例如文本输入)匹配。

enter image description here

reactjs bootstrap-4 react-select reactstrap
1个回答
0
投票
使用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,但是您可以使用任何喜欢的样式应用方法。

© www.soinside.com 2019 - 2024. All rights reserved.