Customize the background color of focused custom Option components

[paddyfink]

Hi,

Thanks very much for this library. It is exactly what I was looking for.
I would like your help on something if you got a little bit of time. I have trouble customizing the focused background color when using a custom Option component.

As you can see, by default the background colour seems to be primary25 of the default select component. And it is not looking nice on dark theme

Here is how my select is defined:

<Select options={tokens} components={{ Option: IconOption }} />

const IconOption = (props) => (
  <components.Option label={props.data.name} {...props}>
    <Flex align="center">
      <Image
        w="20px"
        h="20px"
        src={`${process.env.PUBLIC_URL}/${props.data.image}`}
        alt={props.data.name}
      />
      <Text ml="10px">{props.data.name}</Text>
    </Flex>
  </components.Option>
);

I tried to provide a style like this :

const chakraStyles: ChakraStylesConfig = {
  option: (provided, state) => ({
    ...provided,
    background: state.isFocused ? "teal.100" : provided.background,
  }),
};

I also tried to override the default style

<Select 
  theme={(theme) => ({
    ...theme,
    borderRadius: 0,
    colors: {
      ...theme.colors,
      primary25: 'red',
    },
  })}
  options={tokens} components={{ Option: IconOption }}
/>

Nothing worked. Do you have an idea how to do it please?

[csandman]

Thanks very much for this library. It is exactly what I was looking for.

I'm glad you like it 😀

---

So it looks like you are importing the components object that is exported by the original package. I'm currently exporting both that and the custom components used by this package to give people the freedom of using whatever they want from either.

If you'd like to wrap my theme aware option component, try importing it like this:

import { Select, chakraComponents } from "chakra-react-select";

const IconOption = (props) => (
  <chakraComponents.Option label={props.data.name} {...props}>
    <Flex align="center">
      <Image
        w="20px"
        h="20px"
        src={`${process.env.PUBLIC_URL}/${props.data.image}`}
        alt={props.data.name}
      />
      <Text ml="10px">{props.data.name}</Text>
    </Flex>
  </chakraComponents.Option>
);

export const TokenSelect = () => (
  <Select options={tokens} components={{ Option: IconOption }} />
)

If you do it this way, the background/text colors will match your light/dark mode. If you're still running into any issues, let me know!

---

Also here's an example implementation of a custom Option component I made for someone else which should be pretty similar to what you're trying to accomplish: https://codesandbox.io/s/chakra-react-select-custom-option-d99s7?file=/example.js

[csandman]

This is something I only briefly mention in the Readme, so I'll probably need to update it to be more explicit about importing chakraComponents instead of the original components.

[paddyfink]

Thanks. it worked 💯