[QUESTION] How to customize component colors

[ovirta]

Thank you for a great multiselect component. It is working great.

How can one customize eg background or border colors for the component?

[arthurfrollini]

same question here!
wish I could change borderRadius, focusBorderColor, etc

[csandman]

Ok, I'll try and think of a way to implement this! Chances are I'll end up exporting the custom components I made for this so you can customize them, like the original package does but I'll have to see if it works.

[hugobqd]

I've got a similar question, I wan't to change the design (spaces, bg, colors) of the dropdownIndicators. Is there a good way to do that? Thanks for the work!

[Patrascu-Lucian]

I have a similar problem. I'm trying to customize Option and MultiValueContainer (TagContainer) components.
I'm also trying to change the menu style in order to remove the gutter.

I have a codesandbox example using both react-select and chakra-react-select showcasing that the customization is working properly in the main package:
https://codesandbox.io/s/react-select-vs-chakra-react-select-jhvvs

I think this will be fixed if you export chakraComponents and chakraStyles

[csandman]

@Patrascu-Lucian I think you're right but its not exactly as simple as that. I'm not overriding all of the native react-select components in my wrapper, only some of them, so I either need to override all of them or provide documentation on which ones I am providing. And for the styles, I need to figure out how to merge the ones passed in properly with the custom ones I provide. I basically need to create the same layer that react-select provides for customizing these components and pass them along to react-select.

I have been tinkering with some possibilities but I've been very busy with work and haven't had a chance to hammer it all out.

[csandman]

It was brought to my attention in #21 that the classNames react-select usually applies to each of the sub components were not working for all of my custom components (and therefor the classNamePrefix prop was not working either). This made me realize that, if they were working, it would be a decent alternative until I finish working out the best way to allow styling the sub-components with props.

So I updated the component to add the classNames that react-select uses to each of the sub components, which will let you use CSS to style them in 1.4.0. This is one of the officially supported methods of styling in the react-select docs. This update will also fix the classNamePrefix prop, allowing to prefix the sub-components' classNames however you like.

One thing to note however, is that for some reason a few of the sub-components do not get their base custom className unless you pass the classNamePrefix prop (for example, the dropdown indicator), so to get the full functionality out of this feature, ensure that you pass this prop to the select component. This issue is not specific to this wrapper, I noticed the same thing with the base react-select library.

I made a demo which styles the select like it is in the image above using css, which you can find here: https://codesandbox.io/s/chakra-react-select-classnameprefix-demo-4r2pe?file=/example.js

This does not mean I am going to stop working on a system for forwarding Chakra's style props, but hopefully this will work for some people in the meantime!

---

Side note: If you want to inspect the specific components in the select menu to see their classNames without the menu closing on you, the easiest way is to use the Emulate a focused page option in Chrome's devtools. Enable it, then open the select menu and use the element selector (top left of devtools) to select an item in the menu. Then you'll be free to explore the DOM structure in devtools without it closing automatically. If you're doing this with the CodeSandbox demo however, it only works if you open the sandbox in its own page: https://4r2pe.csb.app/

[csandman]

I finally implemented a way to pass custom styles to each of your components! I added a prop called chakraStyles which behaves similarly to react-select's built in styles prop, with some slight differences. Check the updated documentation for full details and let me know if you still have any questions!

---

As a side note, in order to implement this, I had to replace all of the components built into react-select with custom chakra components so I am also exporting those from the package. They can be imported alongside the primary components like so:

import { Select, chakraComponents } from 'chakra-react-select'

You can check the original react-select documentation on this feature as I have not had a chance to fully implement it. On top of that, most of this package's components will not accept arbitrary custom props, making styling with Chakra's style props impossible. If you really want to pass custom components into this package, I'd recommend completely replacing them with your own using this packages component code as an example.