React Select多行标签

Question

是否可以使用react-select来拥有多行标签，或者为一个选项拥有两个标签？

我将带有值和标签的选择组件选项传递给

value: someValue,
label: "This is my first value - Name: Value 1 \n Foo Bar Date Insert 
Today's Date Here"

我尝试插入换行符，但是文本在选择输入中保留在一行上。我正在寻找一种解决方案，使每个选项有两行。

Answer 1

您可以保留\n换行符并将white-space: pre-wrap添加到标签：

.Select-value-label, .Select-option {
  white-space: pre-wrap;
}

Answer 2

使用\n作为换行符，然后执行以下操作：

JSX

添加classNamePrefix，以便可以对带有类的react-select元素进行样式设置：

<Select
  options={...}
  classNamePrefix="lp-copy-sel"
  ...
/>

CSS

.lp-copy-sel__option, .lp-copy-sel__single-value{
  white-space: pre-wrap !important;
}
.lp-copy-sel__value-container {
  height:5em;
}

其他信息

您可以添加menuIsOpen以便能够检查各种元素及其类。

<Select
  options={...}
  classNamePrefix="lp-copy-sel"
  menuIsOpen
  ...
/>