Theme styles overridden by `size` prop
joshuabaker opened this issue · 8 comments
Description
The below line will always override the border radius defined in theme.components.Menu.$size.list
.
chakra-react-select Version
4.2.2
Link to Reproduction
No response
TypeScript?
- Yes I use TypeScript
Steps to reproduce
- Go to '...'
- Click on '...'
- Scroll down to '...'
- See error
Operating System
- macOS
- Windows
- Linux
- iOS/iPadOS
- Android
Additional Information
No response
height
and minHeight
are also overridden, meaning these needs to be manually removed via chakraStyles
to honour the theme.
chakra-react-select/src/chakra-components/control.tsx
Lines 63 to 64 in ce0ded5
Yeah this is currently the intended behavior, but I should probably specify better in the docs how that works.
Because the Menu
components don't have any size
variants, the only way to make the menu components respond to the size prop is by modifying those style props manually.
The order of preference for applying styles from least preferred to most preferred is
- Theme styles for each component
- Package-specific overrides for props such as
size
chakraStyles
Some styles other than ones based on size
also need to be overridden by the package, like the height
vs. minHeight
on the Control
, because of the fundamental differences in the way chakra-react-select
has to be rendered relative to a normal Input
component. For example, in the case you mention the minHeight
must be used instead of height
because when isMulti
is passed, the control needs to grow if more than one row of options is selected.
vs.
However, in this case I realize I could use inputStyles.field.h
for the minHeight
instead of custom values so I will change that, but there aren't many cases like that.
So I'm curious, is there something specific you were trying to do? Were the docs just confusing about this point? Or alternatively, is there a different way you think these cases could be handled?
Thanks for the thorough explanation. I appreciate that, and now understand better why you’ve done it this way.
My expectation was to be able to control this via theme.components.Input
so this would be consistent for all input components.
I would agree that you might pull Input.field.h
/ Input.field.height
/ Input.field.minHeight
.
For borderRadius
that I originally encountered, is there a functional use case for that override?
Yes, so the borderRadius
on the MenuList
is there to match the styles for the input. If you look at the original Chakra Input
sizes, medium and large both have the same border radius but small has a smaller one:
I wanted this to be reflected on the menu so the styles matched between the Input
and MenuList
Does that make sense?
My expectation was to be able to control this via
theme.components.Input
so this would be consistent for all input components.
I can take another look through, and see if I can make some more inferences about styles based on the components they're supposed to be matching. For example, I could probably pull that border radius from the Input
component's theme instead of manually defining it to make the styles match automatically.
I would agree that you might pull
Input.field.h
/Input.field.height
/Input.field.minHeight
.
I actually gave that a shot in #195 and I'll merge it soon, you can see the change here.
Actually, about the border radius, I just realized I did that wrong... the border radius for size="lg"
should be the same as size="md"
but its actually slightly more rounded because it's using borderRadius="lg"
. It was kind of hard for me to see so I missed it but thanks for bringing it to my attention!
Regarding borderRadius
, that’s assuming users want the default radii options. Our use case is to set borderRadius: null
in the component theme file with the intent to remove it. By restoring it you inadvertently revert it back to the Chakra default, which isn’t desirable. Does that makes sense?
Are you talking about setting borderRadius: null
for the MenuList
component?
But yeah, I see what you're saying. However, the use case seems to fall into a relatively niche category of styling choices and I don't think there's any way around what I'm doing for a lot of these styles. A lot of my manual styles need to exist in order for the variants/sizes to properly style each component that makes up chakra-react-select
.
I think your best bet would just be to override the styles that are not working properly with the chakraStyles
prop. Overall there aren't too too many places where I override theme styles so the chakraStyles
prop shouldn't need to be massive.
So I just published v4.2.5
which includes changes for a couple of the points you listed. I still cannot remove all of the style customization for the reasons I mention above, but these few should help at least. Here's an example of some of the changes in action: https://codesandbox.io/s/chakra-react-select-theme-overrides-5p7gwy?file=/app.tsx
There aren't a ton of style overrides left over, and at the end of the day you should be able to change any of the remaining styles I've overridden with chakraStyles
.
I'm going to close this issue for now as there's nothing else I plan to do to change this, but feel free to continue to comment on it if there's anything more you want to discuss.