如何在react-select v3.1.0中为multiValue和option元素添加类名？

针对react-select 3.1.0版本的解决方案 #

1. 给MultiValue父div添加类名 #

3.1.0版本没有直接给MultiValue组件加类名的API，需要重写整个MultiValue组件（即带-multiValue类的父div），在自定义组件中添加目标类名，同时保留原有功能：

// 自定义MultiValue组件，为父div添加类名
const CustomMultiValue = (props) => {
  const { data, removeProps, children } = props;
  // 保留react-select默认的multiValue类，再追加自定义类名
  return (
    <div className={`react-select__multi-value value-${data.value}`} {...removeProps}>
      {children} {/* 保留原有的标签和删除按钮组件 */}
    </div>
  );
};

// 原有自定义标签组件保留
const CustomMultiLabel = (option) => {
  return (
    <span>{option.data.shortLabel}</span>
  );
};

// 更新Select组件的components配置
const scopeMultiSelect = (
  <Select
    className='cbb-select cbb-scope-multi-select'
    styles={blackSelectStyles()}
    isDisabled={isDisabled}
    value={multiScope}
    isMulti
    onChange={handleChange}
    options={multiScopeOptions}
    components={{ 
      MultiValue: CustomMultiValue, // 替换MultiValue组件
      MultiValueLabel: CustomMultiLabel 
    }}
    // 处理菜单选项的类名
    getOptionProps={(option) => {
      return {
        className: `menu-option-${option.data.value}`
      };
    }}
  />
);

2. 给menuList中的选项添加类名 #

你当前使用的getOptionProps在3.1.0版本中是有效的，类名会直接添加到菜单里的选项元素上。如果没看到生效，可以检查：

• 类名是否和现有样式冲突
• styles配置是否覆盖了元素的默认类名逻辑

升级到react-select v5.7.0+后的简化方案 #

v5.7.0新增的classNames属性可以直接给内置组件动态添加类名，无需重写组件，实现更简洁：

const scopeMultiSelect = (
  <Select
    className='cbb-select cbb-scope-multi-select'
    styles={blackSelectStyles()}
    isDisabled={isDisabled}
    value={multiScope}
    isMulti
    onChange={handleChange}
    options={multiScopeOptions}
    components={{ MultiValueLabel: CustomMultiLabel }}
    // 针对不同组件动态生成类名
    classNames={{
      // 给MultiValue父div加类名
      multiValue: (state) => `value-${state.data.value}`,
      // 给菜单选项加类名
      option: (state) => `menu-option-${state.data.value}`
    }}
  />
);

classNames对象的key对应react-select的内置组件名称（比如multiValue、option），回调函数的state参数包含当前选项的data，可以直接用来生成自定义类名。

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