反应选择将下拉指示器图标更改为字体真棒图标不起作用 [英] react-select changing drop down indicator icon to font-awesome icon is not working

问题描述

我正在尝试将用于react-select多选指示器的图标更改为超棒的字体图标，但是它不起作用.知道为什么吗?

I am trying to change the icon used for the react-select multi select indictor to a font-awesome icon, but it is not working. Any idea why?

import React from "react";
import Select, { components } from "react-select";
import { colourOptions } from "./docs/data";

const Placeholder = props => {
  return <components.Placeholder {...props} />;
};

const CaretDownIcon = () => {
  return <i className="fas fa-caret-down" />;
};

const DropdownIndicator = props => {
  return (
    <components.DropdownIndicator {...props}>
      <CaretDownIcon />
    </components.DropdownIndicator>
  );
};

export default () => (
  <Select
    closeMenuOnSelect={false}
    components={{ Placeholder, DropdownIndicator }}
    placeholder={"Choose"}
    styles={{
      placeholder: base => ({
        ...base,
        fontSize: "1em",
        color: colourOptions[2].color,
        fontWeight: 400
      })
    }}
    options={colourOptions}
  />
);

item标签显示在DOM中，但我看不到该图标.

The item tag is shown in the DOM, but I do not see the icon.

推荐答案

我建议您检查为获得所需的结果，我最终得到以下代码:

To achieve the desired result I end up with the following code:

import React from "react";
import ReactDOM from "react-dom";
import Select, { components } from "react-select";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";

library.add(faCaretDown);


const CaretDownIcon = () => {
  return <FontAwesomeIcon icon="caret-down" />;
};

const DropdownIndicator = props => {
  return (
    <components.DropdownIndicator {...props}>
      <CaretDownIcon />
    </components.DropdownIndicator>
  );
};

function App() {
  return (
    <div className="App">
      <Select
        closeMenuOnSelect={false}
        components={{ Placeholder, DropdownIndicator }}
        placeholder={"Choose"}
        options={colourOptions}
      />
    </div>
  );
}

此处一个您想要的实时示例.

Here a live example of what you want.

这篇关于反应选择将下拉指示器图标更改为字体真棒图标不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！