Having some trouble changing the color of my arrow icon within the Material-ui TextField Select.
Here's what I've tried:
icon: {
fill: "white !important",
},
Despite applying these props, the color remains unchanged. I've experimented with various solutions from online resources but to no avail. The input props with the icon seem to be ineffective.
<TextField
id="outlined-select-currency"
select
label={label}
name={this.props.name}
className={classNames(this.props.classes.textField)}
onChange={(e) => this.props.handleChange(e)}
value={this.props.value}
SelectProps={{
MenuProps: {
className: this.props.classes.menu,
icon: "white !important"
}
}}
InputLabelProps={{
classes: {
root: this.props.overrideCssLabel,
focused: this.props.overrideCssFocusLabel,
icon: {
color: "white !important"
}
},
}}
InputProps={{
classes: {
root: this.props.overrideCssInputRoot,
focused: this.props.overrideCssInputFocus,
notchedOutline: this.props.overrideCssInputNotchedOutline,
icon: this.props.icon
},
style: {
color: this.props.color
},
}}
margin="normal"
variant="outlined"
>
{selectList.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>