Theme styles overridden by size prop

[joshuabaker]

Description

The below line will always override the border radius defined in theme.components.Menu.$size.list.

chakra-react-select/src/chakra-components/menu.tsx

Line 90 in ce0ded5

borderRadius: borderRadii[size || "md"],

chakra-react-select Version

4.2.2

Link to Reproduction

No response

TypeScript?

• Yes I use TypeScript

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

Operating System

• macOS
• Windows
• Linux
• iOS/iPadOS
• Android

Additional Information

No response

[joshuabaker]

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

	height: "auto",
	minHeight: heights[size || "md"],

[csandman]

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

1. Theme styles for each component
2. Package-specific overrides for props such as size
3. 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?

[joshuabaker]

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?

[csandman]

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.

[csandman]

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!

[joshuabaker]

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?

[csandman]

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.

[csandman]

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.