-
Thank you for a great multiselect component. It is working great. How can one customize eg background or border colors for the component? |
Beta Was this translation helpful? Give feedback.
Replies: 7 comments
-
same question here! |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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! |
Beta Was this translation helpful? Give feedback.
-
I have a similar problem. I'm trying to customize I have a codesandbox example using both I think this will be fixed if you export |
Beta Was this translation helpful? Give feedback.
-
@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. |
Beta Was this translation helpful? Give feedback.
-
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 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 One thing to note however, is that for some reason a few of the sub-components do not get their base custom 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/ |
Beta Was this translation helpful? Give feedback.
-
I finally implemented a way to pass custom styles to each of your components! I added a prop called 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. |
Beta Was this translation helpful? Give feedback.
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 instyles
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:
You can check the original react-select documentation on this feature as I have n…