[BUG]: `colorScheme` doesn't get passed to input variants
barrymichaeldoyle opened this issue · comments
Description
When I pass colorScheme
to the Select
component. I expect to be able to use in my theme file. But the colorScheme
comes back as undefined
.
If I copy exactly what it here:
https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/input.ts
Let's console.log the colorScheme
in variantOutline
.
const variantOutline = definePartsStyle((props) => {
const { colorScheme, theme } = props
const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props)
console.log({ colorScheme });
return { ... }
})
When I do this for a normal Input
it correctly shows the colorScheme that I passed to my component. This works for other libs that use Chakra's input under the hood too.
But with this library it returns undefined.
chakra-react-select Version
4.6.0
Link to Reproduction
No response
TypeScript?
- Yes I use TypeScript
Steps to reproduce
No response
Operating System
- macOS
- Windows
- Linux
- iOS/iPadOS
- Android
Additional Information
I think it's just getting cleared somewhere. I tried to dig through the codebase to find it but everything is pretty much abstracted away.
For extra context I'm referring to the global colorScheme
prop:
E.g. if it is used like this:
<Select colorScheme="red" />
Hmm I see what you mean. I think this is due to a difference in the way I'm using color scheme from how you're expecting it to be. As per the docs:
You can pass the
colorScheme
prop to the select component to change all of the selected options tags' colors. You can view the whole list of available color schemes in the Chakra docs, or if you have a custom color palette, any of the custom color names in that will be available instead.Alternatively, you can add the
colorScheme
key to any of your options objects and it will only style that option when selected.
This prop was originally added for the Tag
, component used to display the selected options for a multi-select. It was added a long time ago when this package was just a gist I had shared with some people who were interested, and I was just playing around with some customizations. Realistically I should probably have called it tagColorScheme
, but it was hard to predict how far this project would come, and I didn't plan ahead very well. At this point, switching that around would be a breaking change that I'm not sure if I'd like to make, due to the fact that the Input
component doesn't do anything with the colorScheme
prop by default.
And on that note, what exactly are you trying to accomplish with this? What are you using the colorScheme
prop for? Maybe there is some alternative approach?
I was trying to achieve the same thing which is to change the background of the select input. I have a grey background which if I don't set the select background is grey like the "Operator" select but I want it to be white like the "Variable" select which I added a wrapping <Box />
but that solution doesn't work if you have a border radius. Ideally want to be able to set the background colour similar to Inputs which I have done with the "Value" input.
@barrymichaeldoyle solution works well though