如何有条件地渲染自定义 React Select 下拉指示器的 SVG 颜色 [复制]

问：

我正在尝试将我的自定义 SVG 下拉指示器的颜色更改为其默认颜色，在悬停和 isMenuOpen/isFocused 时。

我目前有一个用于下拉指示器的组件，试图在那里应用颜色，如下所示：

 const CustomDropdownIndicator = (props, state) => {
        const isFocused = state.isFocused;
        const isHovered = state.isHovered;

        const defaultColor = '#5f6368';
        const hoverColor = '#202124';
        const focusedColor = '#1a73e8';

        const color = isFocused ? focusedColor : isHovered ? hoverColor : defaultColor;
            

        return (
            <components.DropdownIndicator {...props} style={{ color }}>
                    <img src={dropDownImageSVG} alt="Dropdown Indicator" />
            </components.DropdownIndicator>
        );
    };

我还尝试在我的customStyles对象中对它应用填充值：

const customStyles = {
        //more styles
        dropdownIndicator: (provided, state)=> ({
            ...provided,
            width: '32.5px', // Adjust the width to fit your image
            height: '20px', // Adjust the height to fit your image
            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : null,
            padding: '0px',
            justifyContent: 'center',
            fill: 'red !important',
        }),
       // morestyles
    }

这是 Select 组件在我的 React 组件返回中的样子，以及我传递给它的内容：

<Select
                    styles={customStyles}
                    onMenuOpen={() => setIsOpen(true)}
                    onMenuClose={() => setIsOpen(false)}
                    class="flag-drop-down"
                    options={customOptions}
                    components={{ DropdownIndicator: CustomDropdownIndicator}}
                    placeholder={isSelectionMade ? '' : <img
                                                            src={require(`../images/flags/${usersCountryFlagSVG}`)}
                                                            alt="Flag"
                                                            width="24"
                                                            height="16"
                                                        />
                    }
                />

有人对此有解决方案吗？