更改颜色箭头图标反应选择答案

【问题标题】：change color arrow icon react-select更改颜色箭头图标反应选择
【发布时间】：2020-01-04 13:42:47
【问题描述】：

嗨，如何在 react-select 中更改箭头图标的颜色在谷歌浏览器的鼠标悬停中，我找到了 CSS 变量，但我无法更改颜色。 CSS css-tlfecz-indicatorContainer 的这个值。在我的customStyles 我写了这一行但没有工作：

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

更新

这是我使用 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'
    />
  );
}

【问题讨论】：

你使用的是哪个版本的 react-select？
@UtkarshPramodGupta v3.0.8
向我们展示你在哪里实现了 React-Select 的代码。
@UtkarshPramodGupta 感谢您帮助更新我的问题

标签： reactjs react-select

【解决方案1】：

只需使用customStyles 并为dropdownIndicator 元素声明一种新颜色：

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

Here 你可以找到所有元素的列表，here 是一个活生生的例子。

【讨论】：

【解决方案2】：

这是我在 4.3.1 版本中的做法

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

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

【讨论】：

【解决方案3】：

这应该会有所帮助：

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 删除了不相关的代码以便更好地理解。 :)

【讨论】：