How do you customize parts of the Select input in the theme file?

[kyin42]

Accordion to the documentation the Select theme has two parts, the field and the icon. But Also accordion to the documentation I can customize the styles of many more parts https://github.com/csandman/chakra-react-select#chakrastyles but have to do it directly on the Select itself. Is there a way to style these parts on the theme instead?
Also, I don't need an answer to this, but does such thing make sense to do? Is it better to setup default styles with components(with chakraStyles) instead of creating a custom theme? I'd think it should belong on the theme, and I'd assume it's more efficient for the chakra engine to handle if it's defined on the theme.
Thanks!

[csandman]

According to the documentation the Select theme has two parts, the field and the icon. But Also accordion to the documentation I can customize the styles of many more parts https://github.com/csandman/chakra-react-select#chakrastyles but have to do it directly on the Select itself. Is there a way to style these parts on the theme instead?

If by this you mean the documentation from the original Select component, these theme styles are actually not used at all. A few of the subcomponents of this package pull in styles from the base chakra theme, but they're pulled in from various components' themes. For example, the styles of the basic select element without the dropdown are pulled from Chakra's Input component. So any changes you make to the theme of that component will be reflected on the Select. I did things this way because in this case, the control is actually a text input, not just a select dropdown trigger. And the reason they are pulled in from other components and not defined on their own was to keep things styled consistently across the app, without having to duplicate styles.

In the documentation link you just sent, you can see the list of components and which ones pull from specifically styled Chakra components:

Most of the components rendered by this package use the basic Chakra <Box /> component with a few exceptions. Here are the style keys offered and the corresponding Chakra component that is rendered:

• clearIndicator - Box (uses theme styles for Chakra's CloseButton)
• container - Box
• control - Box (uses theme styles for Chakra's Input)
• dropdownIndicator - Box (uses theme styles for Chrakra's InputRightAddon)
• downChevron - Icon
• crossIcon - Icon
• group - Box
• groupHeading - Box (uses theme styles for Chakra's Menu group title)
• indicatorsContainer - Box
• indicatorSeparator - Divider
• input - chakra.input (wrapped in a Box)
• inputContainer - Box
• loadingIndicator - Spinner
• loadingMessage - Box
• menu - Box
• menuList - Box (uses theme styles for Chakra's Menu)
• multiValue - chakra.span (uses theme styles for Chakra's Tag)
• multiValueLabel - chakra.span (uses theme styles for Chakra's TagLabel)
• multiValueRemove - Box (uses theme styles for Chakra's TagCloseButton)
• noOptionsMessage - Box
• option - Box (uses theme styles for Chakra's MenuItem)
• placeholder - Box
• singleValue - Box
• valueContainer - Box

So for example, if you changed your app's theme for Menu, Tag, Input, or CloseButton, those styles would be reflected on their corresponding components that make up the Select.

I implemented things this way because I wanted users to be able to use this package without having to import anything into their normal theme, and so it would work the way it was intended to out of the box.

The best way to style the components that make up this package would be to use the chakraStyles prop. If you declare one instance of your chakraStyles object, you can import it wherever you'd like across the app and it should run efficiently. As far as the theme running more efficiently, this is not really any different from creating custom components and applying inline styles to them. Which is an intended behavior of Chakra and shouldn't hurt performance. Let me know if you still need any further explanation.

[kyin42]

Hey thanks for the detail of your answer! That makes a lot more sense now.

[csandman]

No problem! I actually have considered switching over to using theme styles specifically made for this component, but it would involve many changes for both this package and anyone whose using it with custom styles.

There's no way for me to modify a user's theme directly, so they'd have to import the theme into their ChakraProvider in order for any of the styles to work. Also, there's no simple way to duplicate styles from other components (as far as I'm aware), so if people had customizations on other components like the Input or Menu that they wanted to appear on CRS, they'd have to copy those into the theme styles for this package.

Additionally, if a user wanted to extend theme styles I made for this package, they couldn't do it in the same way they might with built-in components. They'd have to manually merge their theme styles with the theme styles object I would export from this package, which would probably involve a lot of object spreading.

---

Overall, I don't think pulling in styles from other Chakra components' themes is the perfect way to do things, but after playing around with many different strategies for styling these components, it was the best I could come up with that would keep things styled consistently across an app. And ultimately, users always have the option to customize styles further using chakraStyles, so I'm happy with the level of customization it has at the moment.

The only concrete way I can think of for it to be improved is a multi-select package being added to Chakra UI itself. Which is on their roadmap, but who knows how long that will take.