I'm looking to add a blue background and color the downward arrow icon in my react select ponent. 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!

I'm looking to add a blue background and color the downward arrow icon in my react select ponent. 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!

• javascript
• reactjs
• user-interface
• react-select

• 2 try use dropdownIndicator instead of 'icon' for dropdown button. and backgroundColor instead of fill – Kenzk447 Commented Oct 24, 2018 at 15:22

3 Answers 3

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.

It looks much simpler and works :)

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

<Select
  styles={colourStylesRow}
/>

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,
    }),
  };