Skip to content

Change icon of dropdownIndicator? #181

Answered by csandman
QuangLoc0311 asked this question in Q&A
Discussion options

You must be logged in to vote

Check out the Customizing Components section of the docs. The example listed there should be exactly what you need: https://codesandbox.io/s/chakra-react-select-custom-icons-xf7scd?file=/example.js

For simplicities sake, here's a specific example:

import { Icon } from "@chakra-ui/react";
import { Select, chakraComponents } from "chakra-react-select";
import { AiFillCaretDown } from "react-icons/ai";

const customComponents = {
  DropdownIndicator: (props) => (
    <chakraComponents.DropdownIndicator {...props}>
      <Icon as={AiFillCaretDown} h={4} w={4} />
    </chakraComponents.DropdownIndicator>
  )
};

const Example = () => (
  <Select
    useBasicStyles
    components={customComponents

Replies: 1 comment

Comment options

You must be logged in to vote
0 replies
Answer selected by QuangLoc0311
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants