以列方式显示多值标签

【问题标题】：Show MultiValueLabels in a columnwise fashion以列方式显示多值标签
【发布时间】：2021-07-05 12:05:06
【问题描述】：

在下图中，我希望我的多值 Select 组件的标签以列方式位于彼此下方。

<Select
    closeMenuOnSelect={false}
    components={makeAnimated()}
    options={optionsIngameMode}
    defaultValue={optionsIngameMode}
    noOptionsMessage={() => "No game modes selected"}
    isMulti
    autoFocus
/>

我怎样才能做到这一点？

【问题讨论】：

标签： reactjs react-select jss multivalue

【解决方案1】：

这可以通过将multiValue 宽度设置为100% 来填充所有容器空间来轻松完成

const customStyles = {
  multiValue: (provided) => ({
    ...provided,
    width: "100%"
  }),
  multiValueLabel: (provided) => ({
    ...provided,
    marginRight: "auto", // push the delete icon to the far right
  }),
  input: (provided) => ({
    ...provided,
    display: "none"
  }),
  valueContainer: (provided) => ({
    ...provided,
    minHeight: 30
  }),
};

export default () => (
  <Select isMulti styles={customStyles} options={colourOptions} />
);

现场演示

【讨论】：

工作就像一个魅力！ +1