Theming

The Select component is a multipart component. Read more about how to style multipart components in the style system docs.

This component has two parts: field and icon. You can find more information in the source for the styles here.

Example

The following theme would change the color of the field to red.500, and change the fontSize of icon to 2xl.

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  components: {
    Select: {
      baseStyle: {
        field: {
          color: "red.500",
        },
        icon: {
          fontSize: "2xl",
        },
      },
    },
  },
});