反应选择将下拉指示器图标更改为字体真棒图标不起作用

Question

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

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中，但我看不到该图标。

Answer 1

我建议您检查Font Awesome for React的文档。

要获得理想的结果，我将获得以下代码：

@Bean("jim")
fun getJim(@Value("\${person.name:Jim Jones}") name : String) = Person(name)

Here一个您想要的例子。