Search code examples
reactjsreact-select

change color arrow icon react-select

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

enter image description here

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'
    />
  );
}
Solution

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