How do I change color of singleValue when hovering on control?

[cpnvr]

Is it possible to change the color of singleValue text when hovering anywhere over the control div?

Right now if I add a hover state to singleValue itself, it only takes place if I'm mousing over the text itself -- not the entire Select component, which is my goal.

I've tried everything myself and searched SO as well, so I'm going here as a last resort and would very much appreciate your help 🙏

[Rall3n]

Hello @cpnvr,

I would suggest a combination of classNamePrefix and the styling api.

You use the classNamePrefix prop to apply fixed classes to the inner components (SingleValue would have PREFIX__single-value). With this you can apply a :hover style onto the Container component to target the SingleValue by class.

<Select
    classNamePrefix='select'
    styles={{
        container: (provided) => ({
            ...provided,
            '&:hover .select__single-value': {
                color: 'red'
            }
        })
    }}
/>

[cpnvr]

I legit would never have figured that out on my own. Works perfectly ^_^/

The one thing that I added to complete the feature is a similar rule for placeholder:

container: (provided, state) => ({
      // wrapper for control
      ...provided,
      "&:hover .select__single-value, &:hover .select__placeholder": {
        color: "purple",
      },
    }),

Thank you so very much, @Rall3n

[Rall3n]

@cpnvr Please don't forget to mark this as the answer, so everyone can see that your question is resolved.

[cpnvr]

@Rall3n Happy to.... but I noticed that there's an edge case.

The color reverts to its un-hovered style when the mouse drifts into the gap between control and the menu below it. The code I've written to try and address this isn't taking effect:

// y u no work

container: (provided, state) => ({
      // wrapper for control
      ...provided,
      "&:hover .select__single-value, &:hover .select__placeholder": {
        color: colors.darkBlue,
      },
      ".select__control": {
        borderColor: state.isFocused && colors.orange,
        color: state.isFocused && colors.orange,
      },
      ".select__single-value": {
        color: state.isSelected && colors.orange,
      },
    }),
...
    singleValue: (provided, state) => ({
      // active text label input selector
      ...provided,
      color: colors.blue,
      textTransform: "uppercase",
      fontSize: ".875rem",
    }),

Screenshots:

Default State:

Hover before click:

Hover after click:

Nooooooooooooooooo (menu open but no hover: this is the edge case):

Hover on menu -- this works now:

Any suggestions?

[Rall3n]

@cpnvr That is how position: absolute works. The dropdown is still part of the container, but does not affect its bounds.

You could reduce the gap between the dropdown and the container if you want to by removing margin-top from the menu styles.

styles={{
  menu: ({ marginTop, ...provided }) => provided
}}

[cpnvr]

Okay I figured it out -- it was isFocused not isSelected that did the trick:

control: (provided, state) => ({
      ...
      "&:hover": {
        borderColor: colors.orange,
        color: state.isFocused ? colors.orange : colors.blue,
      },
      ".select__single-value": {
        color: state.isFocused && colors.orange,  // awwwww yeahhhhh
      },
    }),