How can I style the arrow of react select component?

user_6073066 0
Viewed 13458

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....

enter image description here

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

enter image description here

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!

react-select reactjs user-interface javascript
3 Answers

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.

user_634370

It looks much simpler and works :)

const colourStylesRow = {
  dropdownIndicator: styles => ({ ...styles, color: '#FFAE12', })
}

<Select
  styles={colourStylesRow}
/>
user_47397810

thank you so much ,you solved my problem

const customStyles = {dropdownIndicator: (base, state) => { let changes = { padding: 0, }; return Object.assign(base, changes); },

control: (base) => ({
  ...base,
  height: 0,
  minHeight: 28,
}),
IndicatorsContainer: (base) => ({
  ...base,
  minHeight: 1,
}),

};

user_184360980
Related