I've made some custom SVG icons for my project. I've been changing their colors by using the filter property in my SASS files. This works fine everywhere in the app except for my custom react-select components.
I can't figure out how to target the icons via the styled component syntax (filter doesn't autocomplete, so maybe it's not even an option?), so I've been trying to style the Image component directly with the className prop. That doesn't seem to be doing anything though.
Any ideas on why the style isn't taking on my icons?
Example:
- Icons should be white, but they stay black (original color)
//Select.js
const ComboBox = (props) => {
const [selectedOption, setSelectedOption] = useState(props.options[0]);
...
const customStyles = {
...
singleValue: (base) => ({
...base,
display: "flex",
color: styleVars["color"],
alignContent: "center",
alignItems: "center",
fontSize: styleVars["font-size"],
}),
...
};
const CustomSingleValue = (props) => (
<SingleValue {...props}>
<Image
styles={styleVars.react__select__icon}
src={props.data.icon}
width="20"
height="20"
alt={props.data.label}
/>
{props.data.label}
</SingleValue>
);
return (
<Select
className={classes}
classNamePrefix="react-select"
defaultValue={selectedOption}
onChange={onOptionChange}
options={props.options}
styles={customStyles}
isSearchable={false}
blurInputOnSelect // Remove focus after selection
menuPlacement="auto"
menuPosition="fixed"
instanceId={useId()}
components={{
SingleValue: CustomSingleValue,
IndicatorSeparator: () => null,
DropdownIndicator: () => null,
}}
// menuIsOpen={true} // Use while working on dropdown
/>
);
};// sass
@use '../../../styles/globals'
.react__select__icon
margin-right: 8px
filter: globals.$secondary-color-var-filter
.react__select__input__container
align-content: "center"
:export
color: globals.$primary-font-color
font-family: globals.$font-family-roboto
font-size: globals.$font-size-m
border-color: globals.$border-line
border-hover: globals.$border-active
nav-hover: globals.$nav-hover
nav-active: globals.$nav-active
darksidebar: globals.$darksidebar