使用 react-select，将 classNames 添加到“multiValue”和“option”元素

Question

We are looking to add classes to various elements in the react-select select component. We have the following code to create a multi-select:

const CustomMultiLabel = (option) => {
    return (
        <span className={`value-${option.data.value}`}>
            {option.data.shortLabel}
        </span>
    );
};

const scopeMultiSelect =
    (<Select
        className='cbb-select cbb-scope-multi-select'
        styles={blackSelectStyles()}
        isDisabled={isDisabled}
        value={multiScope}
        isMulti
        onChange={handleChange}
        options={multiScopeOptions}
        components={{ MultiValueLabel: CustomMultiLabel }}
        getOptionProps={(option) => {
            return {
                className: option.data.value
            };
        }}
    />);

And the following HTML is rendered:

We are struggling with classes in 2 ways:

• currently the class-name value-${option.data.value} (eg 'value-l5g') is being added to the element, but we need this to be added to 's parent, the with className -multiValue .
• no classes are being added onto the options in the menuList , however we would like classes added here as well.

Is it possible to modify our code to add classes into the correct places?

Edit: we are using react-select version 3.1.0, but it looks like a classNames prop was introduced in version 5.7.0... we are trying to upgrade to give this a try.

Answer 1

After upgrading to v5.7.0 , adding the following to the main select did the trick:

<Select
    classNames={{
        option: d => `our-option-${d.data.value}`,
         multiValue: d => `our-multivalue-${d.data.value}`
    }}
    ...
/>