С помощью React-Select, как я могу сделать раскрывающийся список доступным через React-Bootstrap-Glyphicon?

Question

Я хотел создать выпадающий список с помощью React-Select, но вместо пользовательского интерфейса вида:

Я хотел, чтобы выглядеть следующим образом:

Это мой текущий код:

dropDown = R.createElement(Select, { 
      options: options, 
      valueKey: 'value', 
      labelKey: 'name', 
      clearable: false, 
      placeholder: "Action", 
      searchable: false, 
      autosize: false, 
      onChange: function (opt) { 
       if (opt.callback === undefined && opt.callback !== "function") { return; } 
       opt.callback({ 
        importable: importable, 
        scheduledImportable: sImportable 
       }, index); 
      }, 
      optionRenderer: function (ele) { 
       return R.createElement(
          'span', 
          { style: { color: ele.color} }, 
          R.createElement('span', { className: ele.icon},null, " "), 
          ele.name 
         ); 
      } 
     }); 

Любая помощь была бы принята с благодарностью.

Answer 1

Можно ли использовать другой элемент, чтобы помочь?

<div className="select-wrapper"> 
    <span className="glyphicon glyphicon-align-left" aria-hidden="true"></span> 
    <Select .... /> 
</div> 

Тогда CSS

.select-wrapper { 
    position:relative; 
} 

.select-wrapper .glyphicon { 
    position: absolute; 
    z-index: 5; 
    display: block; 
    top: 7px; 
    left: 10px; 
    color: #ccc; 
    pointer-events: none; 
}