classNames not overriding base styles

[gopal-amlekar]

Hi, I am trying to use custom styles for Select component with the classNames prop. However, I am not able to override the base styles. It happens that I have to use the unstyled prop only and then my custom styles work. But then that removes all the original styles. My attempt is to override only some styles as needed. I think that should be possible as per the classNames documentation here.

Here is my code below (Sandbox link)

export default () => (
  <div>
    <Select
      // classNames override does not work. I need to add unstyled prop
      // which removes all styles
      // How do I control the specificity of my classes in this case?
      //

      // unstyled
      classNames={{
        option: (state) => (state.isDisabled ? "disabled-option" : "")
      }}
      options={colourOptions}
    />
  </div> 

My ultimate goal is to use Tailwind css but since it didn't work I tried to do the simple example as above. Is that a bug in my code or something?