How can I style the arrow of react select component?

Question

I'm looking to add a blue background and color the downward arrow icon in my react select component. However I can't seem to find the right method to target the pieces of the select I'm looking to change at the moment the select looks like....

And I'd like it to be more like.....

My code is currently ...

  render() {
    const { selectedOption } = this.state;
    return (
      <Select
        value={selectedOption}
        styles={reactSelectStyles}
        onChange={this.passingprops}
        options={this.state.adminoptions}
      />
    );

  }
}

const reactSelectStyles = {
  icon: {
    fill: "blue"
  }
}

Am I going in the right direction or have I missed the mark entirely? I feel there is a simple solution to this I just can't quite get there.

Thanks all!

Solution

you have to override the styles of the dropdownIndicator.

const dropdownIndicatorStyles = (base, state) => {
  let changes = {
    // all your override styles
    backgroundColor: 'blue';
  };
  return Object.assign(base, changes);
};

<Select styles={{dropdownIndicator: dropdownIndicatorStyles}} />

You'll have to play with it some, but hopefully you get the gist. If you want to know what styles are already applied, just introspect base in your debugger. The Documentation gives some examples as well.

Comments

[D. West]

This is great thank you very much! I can see now where I should have been looking to make this happen. Thanks for your example!