change color arrow icon react-select

Question

hi how to change color of arrow icon in react-select in mouse over in google chrome, I find CSS variable but I cant change color. this value of CSS css-tlfecz-indicatorContainer. in my customStyles I wrote this line but not working:

  indicatorContainer:base =>({
        ...base,
       color:'#000000'
     }),

UPDATE

this is my component I use react-select

import React from 'react';
import Select from 'react-select';
export default function DropDown(props) {
  const customStyles = {
    control: (base, state) => ({
      ...base,
      background: "#59c5b8",
      borderRadius: 0,

    }),
    menu: base => ({
      ...base,
      // override border radius to match the box
      borderRadius: 20,
      // kill the gap
      marginTop: 0,

    }),
    menuList: base => ({
      ...base,
      // kill the white space on first and last option
      padding: 0
    }),
    indicatorSeparator: base => ({
      ...base,
      display: 'none'
    }),
    myDropDown__indicator: base => ({
      ...base,
      '&.myDropDown__dropdown-indicator': {
        '&.indicatorContainer': {
          color: '#000000'
        }
      }

    }),
    '&.indicatorContainer': {
      color: '#000000'
    }
  };


  const [selectedOption, setSelectedOption] = React.useState(0);

  const handleChange = selectedOption => {

    setSelectedOption(selectedOption)

    props.parentCallBack(selectedOption)
  };
  return (
    <Select


      isSearchable={false}
      styles={customStyles}
      isOptionDisabled={true}
      defaultValue={props.options[0]}
      isRtl={true}
      onChange={handleChange}
      options={props.options}
      classNamePrefix='myDropDown'
    />
  );
}

Adp

Which version of react-select are you using? – Knapp

@Knapp v3.0.8 – Adp

Show us your code where you have implemented React-Select. – Knapp

@Knapp thanks for helping update my question – Adp

Answer 1

Just use customStyles and declare a new colour for dropdownIndicator element:

const customStyles = {
  dropdownIndicator: base => ({
    ...base,
    color: "red" // Custom colour
  })
};

Here you can find the list of all the elements and here a live example.

Philosophism

This appears to only work for react-select v3. For v4 and newer see the answer below from Michal Kurowski. – Whangee

Answer 2

Here is how I did it in version 4.3.1

const style = {
  dropdownIndicator: (provided) => ({
    ...provided,
    "svg": {
      fill: "red"
    }
  }),
}

return (
  <Select options={renderOptions()} styles={style} />
);

Upbraid

Please read How to Answer and edit your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post. – Nissa

Answer 3

This should help:

import React from 'react';
import Select from 'react-select';

export default function DropDown(props) {
  const customStyles = {
    indicatorsContainer: () => ({
      '.myDropDown': {
        '&__dropdown-indicator': {
          color: 'red' // <--- Color of your choice
        }
      }
    })
  };

  return (
    <Select
      styles={customStyles}
      classNamePrefix='myDropDown'
    />
  );
}

PS Removed non-related code for better understanding. :)

Knapp

Please read How to Answer and edit your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post. – Nissa

Answer 4

You can change the color of the indicators when the control component is focused:

dropdownIndicator: (styles, state) => ({
  ...styles,
  color: state.isFocused ? "hsl(0, 0 , 0, 80%)" : "hsl(0, 0 , 0, 60%)",
}),

Stetson