Applying custom styling to SelectList component overrides other styling

[jonotrujillo]

• @freenow/wave version: 1.18.0

Relevant code

When applying custom styles to the SelectList component using the styles API from react-select, other styles get overwritten.

For example:

<SelectList
  id="select-list-playground"
  isMulti
  hideSelectedOptions={false}
  styles={{
  option: (css, state) => ({
    ...css,
    position: 'relative',
    ...(state.isSelected && {
      '::after': {
        content: '" (selected)"',
      },
    }),
  }),
}}
  label="City"
  onChange={change => console.log(change)}
  options={[
    {
      label: 'Barcelona',
      value: 'bcn',
    },
    {
      label: 'Hamburg',
      value: 'ham',
    },
    {
      label: 'Paris',
      value: 'par',
      isDisabled: true,
    },
  ]}
/>

Produces a select list that looks like this, where the style is overwritten for the pills, disabled state, height of the select list...

Our use case for applying custom styling to the option is that we want to show the "(selected)" text next to the selected ones, to help the user navigate the options. We are currently doing this with JS, but we can simplify the code a lot if custom css was supported here.

What was expected to happen?

Styles should be merged?

Reproduction

https://codesandbox.io/s/wave-playground-forked-oq8jpd?file=/src/App.js

[bluessista]

I like this request as it also affects our case were we want the mandatory option in a multi select not to be clearable.

[rafael-sepeda]

The "Fixed" option is already part of the original React Select component that we use as a basis. So it should be possible to use this. We also have a tag component with dismissible={false} option https://wave.free-now.com/components/tag