React Select 多行标签

React Select multiline labels

有没有一种方法可以使用 react-select 来制作多行标签,或者可以为一个选项制作两个标签?

我传递了带有值和标签的 select 组件选项

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

我试过插入一个换行符,但文本在 select 输入中仍保留在一行中。我正在寻找一种解决方案,每个选项都有两行。

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

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

使用\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
  ...
/>