React-select: Missing onHover styles with custom Option component

[cutterbl]

When using a custom Option component, the onHover styling (background color) no longer applies. I want to say this was working in 2.1.0, as long as you were copying innerRef and innerProps to the custom Option, but appears to be missing from 2.1.1. An example can be shown in this codesandbox.
[Side Note]: I changed the versions in codesandbox, and tried 2.0.0 and 2.1.0, and neither of these applied the onHover styling either.

[fortezhuo]

Hi,

I had same problem with your case, and I found solution on the option script :

https://github.com/JedWatson/react-select/blob/master/src/components/Option.js

And I have update your given example : https://codesandbox.io/s/6zxnx9kmxz

Hope this solution will solve your problem

[tachang]

@hedikasmanto Thank you for this. Basically copying what the default component does gives you all the normal styles.

[fortezhuo]

I think we can customize styles too, More about customize style => https://react-select.com/styles

 const getTheme = theme => {
        return {
          ...theme,
          borderRadius: 0,
          colors: {
            ...theme.colors,
            primary25: {customPrimary25}, // Don't forget to define this
            primary: {customPrimary}, // Don't forget to define this
            neutral5: {customNeutral5}, // Don't forget to define this
            neutral40: {customNeutral40} // Don't forget to define this
          }
        }
      }

const CustomOption = props => {
  const { innerProps, isDisabled, isFocused, isSelected, data, className, cx, getStyles } = props
  return !isDisabled
    ? <div
      className={cx(
          css(getStyles('option', props)),
        {
          option: true,
          'option--is-disabled': isDisabled,
          'option--is-focused': isFocused,
          'option--is-selected': isSelected
        },
          className
        )}
      {...innerProps}>
      /** Custom Component here **/
    </div>
    : null
}

 <Select.Async
       theme={getTheme}
       components={{ Option: CustomOption }}
      {...anotherProps}
  />

[cutterbl]

@hedikasmanto Thanks for that. Should've dug in the source myself. Guess I got lazy this time ;)