React-select: Can't provide style for `indicatorContainer`

[smeijer]

I can't provide a style for indicatorContainer, (not to be confused with indicatorsContainer)

The element is also not listed under styles as being stylable, but it does contain styles (like padding and color), which I'm now unable to override.

const styles = {
  // this one works
  indicatorsContainer: (provided) => ({
    ...provided,
    color: 'red',
  }),

  // THIS IS THE BUGGING ONE
  indicatorContainer: (provided) => ({
    ...provided,
    color: 'blue',
  }),
};

<Select styles={styles} />

[chalas-ch]

Hello, I second this, I'm having the same problem.
Is this style it completely inaccessible ?

[smeijer]

@chalas-ch, as a workaround I'm currently overriding the DropdownIndicator component. It's not as easy as providing the style, but it's something.

import Select, { components as SelectComponents } from 'react-select';

const components = {
  DropdownIndicator: (props) => (
    <SelectComponents.DropdownIndicator {...props}>
      <Chevron style={ myStyles } />
    </SelectComponents.DropdownIndicator>
  ),
};

<Select components={components} />

[codeReader52]

@smeijer Apologies in advance if I didn't fully understand/mis-understand your issue. I thought that there is something called dropdownIndicator in the css styles - I think that in fact will set the CSS in the "indicatorContainer" shown in devtool? That should I don't think there has ever been an indicatorContainer.
Code sandbox: https://codesandbox.io/s/dropdown-indicator-css-tissk?file=/example.js

[smeijer]

Thanks, @codeReader52! Looks like you're right. I guess the change in naming convention threw me off.

This works just fine:

<Select
  styles={{
    dropdownIndicator: (provided) => ({
      ...provided,
      color: 'red',
      ':hover': {
        color: 'yellow',
      },
    }),
  }}
/>

[PQALAB]

Y'all really tricked me with this one as well, glad I looked this up