Comparez les prix des domaines et des services informatiques des vendeurs du monde entier

React-Select Modification de l'icône Indicateur déroulante sur l'icône Font-Incroyable ne fonctionne pas

J'essaie de changer l'icône utilisée pour l'indicateur
react-select

multi select, Sur l'icône Font-Awesome, mais cela ne fonctionne pas. Il y a des idées, pourquoi?


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

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

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

const DropdownIndicator = props => {
return /
<components.dropdownindicator {...props}="">
<caretdownicon></caretdownicon>
</components.dropdownindicator>
/;
};

export default // => /
<select base="" closemenuonselect="{false}" components="{{" dropdownindicator="" placeholder='{"Choose"}' placeholder,="" placeholder:="" styles="{{" }}=""> /{
...base,
fontSize: "1em",
color: colourOptions[2].color,
fontWeight: 400
}/
}}
options={colourOptions}
/&gt;
/;


L'étiquette d'élément est affichée dans DOM, Mais je ne vois pas l'icône.

https://i.stack.imgur.com/kZyjF.png
</select>
Invité:

Damien

Confirmation de:

Je vous recommande de vérifier la documentation
https://fontawesome.com/how-to ... react
.

Pour obtenir le résultat souhaité, je reçois le code suivant:


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"></fontawesomeicon>;
};

const DropdownIndicator = props => {
return /
<components.dropdownindicator {...props}="">
<caretdownicon></caretdownicon>
</components.dropdownindicator>
/;
};

function App// {
return /
<div classname="App">
<select closemenuonselect="{false}" components="{{" dropdownindicator="" options="{colourOptions}" placeholder='{"Choose"}' placeholder,="" }}=""></select>
</div>
/;
}


https://codesandbox.io/s/0y320oyq5n
Exemple en direct de ce que vous voulez.

Pour répondre aux questions, connectez-vous ou registre