Even when unstyled, some styles remain

[ericmorand]

We are currently theming an application that uses react-select, and on order to reclaim control on the presentation, we configured react-select as unstyled. Still, there are some styles remaining (in the form of css- classes).

Is there a way to disabled styleing entirely and reclaim total control on the presentation layer?

[MuhammadSaffiullah]

Hi @ericmorand , I can confirm this behavior.

I set up a reproduction using react-select v5.10.2. Even with the unstyled prop set to true, the internal Emotion classes (e.g., css-cp1gg-control) are still being applied to the Control and ValueContainer components alongside the custom classNamePrefix classes.

Here is the reproduction: https://codesandbox.io/p/devbox/triage-3r8lvs?embed=1

It seems the unstyled prop isn't fully preventing the default Emotion styles from generating in the Control component. I'd be happy to look into a fix for this!

[parkersweb]

I think that's intended - the documentation says:

This removes all the presentational styles from React Select (leaving some important functional styles, like those for menu positioning and input width in multi select).

But that's a pain - because you're stuck with a specificity battle when you come to add classNames unless you use hacks like the one suggested in the Storybook example. It feels like unstyled should genuinely be that - no emotion styles applied?

At the moment the only other way I've been able to work around it is to pass a big object of empty styles e.g. :

  const emptyStyles = {
    clearIndicator:      () => ({}),
    container:           () => ({}),
    control:             () => ({}),
    dropdownIndicator:   () => ({}),
    group:               () => ({}),
    groupHeading:        () => ({}),
    indicatorsContainer: () => ({}),
    indicatorSeparator:  () => ({}),
    input:               () => ({}),
    loadingIndicator:    () => ({}),
    loadingMessage:      () => ({}),
    menu:                () => ({}),
    menuList:            () => ({}),
    menuPortal:          () => ({}),
    multiValue:          () => ({}),
    multiValueLabel:     () => ({}),
    multiValueRemove:    () => ({}),
    noOptionsMessage:    () => ({}),
    option:              () => ({}),
    placeholder:         () => ({}),
    singleValue:         () => ({}),
    valueContainer:      () => ({}),
  }

to zero out the emotion styles. But that's an ugly fix too...

[ericmorand]

It feels like unstyled should genuinely be that - no emotion styles applied?

Yeah, I think it should work that way - removing every single style.