React Select多选值添加圆角后元素垂直错位问题求助

直接通过以下样式调整修复不同缩放比例下的垂直对齐问题：

1. 确保多选气泡容器（multiValue）使用弹性布局并强制垂直居中
2. 统一子元素（标签、删除按钮）的行高与内边距，消除默认样式干扰
3. 对删除按钮单独设置弹性居中，避免图标偏移

修改后的完整代码：

import React from "react";
import { ColourOption, colourOptions } from "./docs/data";
import Select, { StylesConfig } from "react-select";

const colourStyles: StylesConfig<ColourOption, true> = {
  control: (styles) => ({
    ...styles,
    fontSize: 17,
  }),
  multiValue: (styles) => ({
    ...styles,
    borderRadius: 27,
    border: "1px solid black",
    // 核心：启用弹性布局并垂直居中
    display: "flex",
    alignItems: "center",
    // 统一行高，避免缩放时像素偏移
    lineHeight: "1",
    // 调整内边距，给内容留出合适空间
    padding: "4px 8px",
  }),
  multiValueLabel: (styles) => ({
    ...styles,
    // 继承容器行高，保持对齐
    lineHeight: "inherit",
    padding: "2px 4px",
    flex: 1,
  }),
  multiValueRemove: (styles) => ({
    ...styles,
    lineHeight: "inherit",
    padding: "2px",
    // 让删除按钮内部的图标也垂直居中
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  }),
};

export default () => (
  <Select
    closeMenuOnSelect={false}
    defaultValue={[colourOptions[0], colourOptions[1]]}
    isMulti
    options={colourOptions}
    styles={colourStyles}
  />
);

关键修复点说明： #

• 移除!important，通过react-select的样式配置优先级直接覆盖默认样式，更规范
• multiValue容器的display: flex和alignItems: center是垂直居中的基础
• 统一lineHeight: "1"避免不同元素行高差异在缩放时产生偏移
• 对multiValueRemove单独设置弹性布局，确保删除图标本身也处于居中状态，避免因图标尺寸导致的对齐偏差

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