Antd多选Select组件选中标签后如何持续显示占位符？

我希望Antd的Select组件始终显示占位符文本，尤其是在已选中多个（或至少一个）标签的情况下。目前通过tagRender返回null能实现部分需求，但输入框会变为空白，我需要占位符持续显示。请问是否可以实现？

用户提供的示例代码：

const selectOptions = [];
for (let i = 10; i < 36; i++) {
  const value = i.toString(36) + i;
  selectOptions.push({ label: value, value });
}

const SelectDemo = () => {
  const [selected, setSelected] = useState([]);

  const handleChange = (selected) => {
    setSelected(selected);
  };

  return (
    <Select
      value={selected}
      tagRender={() => null}
      options={selectOptions}
      mode="multiple"
      size="default"
      placeholder="Please select"
      onChange={handleChange}
      style={{ width: "100%" }}
    />
  );
};

方法一：CSS强制显示原生占位符 #

Antd默认在选中选项后会隐藏占位符，我们可以通过提升CSS优先级强制让它始终显示，同时隐藏选中标签的容器避免占位符被挤压：

/* 强制显示多选Select的占位符 */
.ant-select-multiple .ant-select-selector .ant-select-placeholder {
  display: block !important;
  opacity: 1 !important;
  color: rgba(0, 0, 0, 0.45) !important;
}

/* 隐藏选中标签的容器，避免占位符被覆盖 */
.ant-select-multiple .ant-select-selector .ant-select-selection-overflow {
  display: none;
}

将这段样式引入项目后，原组件代码无需修改（保持tagRender={() => null}或直接通过CSS隐藏标签容器均可）。

方法二：自定义占位符（无全局样式污染） #

如果不想影响全局的Select组件，可以通过自定义占位符元素结合样式控制来实现：

const selectOptions = [];
for (let i = 10; i < 36; i++) {
  const value = i.toString(36) + i;
  selectOptions.push({ label: value, value });
}

const SelectDemo = () => {
  const [selected, setSelected] = useState([]);

  const handleChange = (selected) => {
    setSelected(selected);
  };

  // 不渲染选中标签
  const customTagRender = () => null;

  return (
    <div className="custom-select-wrapper">
      <Select
        value={selected}
        tagRender={customTagRender}
        options={selectOptions}
        mode="multiple"
        size="default"
        placeholder="" // 清空原生占位符
        onChange={handleChange}
        style={{ width: "100%" }}
      />
      {/* 自定义占位符 */}
      <span className="custom-placeholder">Please select</span>
    </div>
  );
};

对应的CSS：

.custom-select-wrapper {
  position: relative;
}

.custom-placeholder {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0, 0, 0, 0.45);
  pointer-events: none; /* 不干扰Select的点击、输入等交互 */
}

这种方式只会影响当前组件的Select，不会污染全局样式，灵活性更高。

内容的提问来源于stack exchange，提问作者asus