Change option's background color when keypressed

[nsoubelet]

Hi there,
I am not able to identify how to change the default light blue background color when key is pressed over an option.

Is there any state I'm missing here?
backgroundColor: state.isSelected ? "green" : state.isFocused ? 'green' : state.isActive ? "red" : "bg-gray-50",
I thought it was the effect of active, but apparently it is not.

I also tried this with no luck:

'&:active': {
    ...styles,
    backgroundColor: "red",
    color: "white"
}

It's strange because color works in this case, but backgroundColor is not being picked up...
Any idea? Thanks

[manjushsh]

Can you share a sandbox link with issue replicated?
Something like this?

[nsoubelet]

Yes, here.
I just forked yours and added a style2 which is applied to 2nd Select, basically my idea is to change the BG color when option clicked, instead of using the primary25.

I solved the issue by using a custom template, which is not really good solution but it works.

theme={(theme) => ({
    ...theme,
    borderRadius: 0,
    colors: {
        ...theme.colors,
        primary25: "my-color1",
        primary50: ""my-color2",
        primary: ""my-color2",
    },
})}

[manjushsh]

yep