如何使单选中的选定值与多选相似

Question

在反应选择中，如果我使用多选，所有选定的值都显示为药丸，整个输入框会增长以显示所有选定的值。 但是在单选的情况下，它只是保持固定，任何溢出的文本都会被省略号截断。 在某些情况下，单个选择将在 UI 上限制宽度，但我可以调整高度范围，以便用户可以看到整个选定的选项。 CSS更改可能吗？ 或者有任何配置吗？

Answer 1

我建议使用自定义styles道具创建您自己的Select元素，如下所示：

const styles = {
  singleValue: base => ({
    ...base,
    // You will to add a bit more space around your option so it can fit
    maxWidth: "calc(100% - 10px)",
    position: "relative",
    textOverflow: "initial",
    top: "initial",
    transform: "none",
    whiteSpace: "initial"
  })
};

<Select options={options} styles={styles} />

重要的一点是重置元素的absolute位置。

这里有一个活生生的例子。