Is there a way to use the main style of chakra ui as props?

[Thiago-spart]

My question is...
I made some custom components and I have some difficulties to custom the Select element, is there a way to make it extends the chakra ui Select props? so I can use the bg, _hover and the other props

Custom component I mentioned

[csandman]

I think what you're looking for is the chakraStyles prop, it lets you style each element using native chakra styles.

https://github.com/csandman/chakra-react-select#chakrastyles

---

I just made an example for how you'd do that using the component you provided, but you'd probably need to tweak the styles of more of the sub-components to make it look like you want.

CodeSandbox: https://codesandbox.io/s/chakra-react-select-custom-control-styles-gfnlo9?file=/example.js

import { FormControl, FormLabel } from "@chakra-ui/react";
import { Select } from "chakra-react-select";
import { groupedOptions } from "./data/data";

const Example = () => (
  <FormControl p={4}>
    <FormLabel>chakra-react-select demo</FormLabel>
    <Select
      size="lg"
      focusBorderColor="pink.500"
      chakraStyles={{
        control: (provided) => ({
          ...provided,
          borderColor: "gray.900",
          bg: "gray.900",
          _hover: {
            bg: "gray.900"
          }
        })
      }}
      name="colors"
      options={groupedOptions}
      placeholder="Select some colors..."
    />
  </FormControl>
);

[Thiago-spart]

Thanks man ❤️