Input border radius not overridable via baseStyle

🐛 Bug report

I am unable to override Input’s border radius via theme.compontnts.Input.baseStyle.borderRadius. However, I am able to override it by passing the borderRadius prop to the component itself.

💥 Steps to reproduce

1. Create an Input.
2. Create a Theme object and pass it to the Chakra provider.
3. Assign Theme.components.Button.baseStyle.borderRadius to 0.
4. Observe no change
5. Remove the assignment from step 3.
6. Add the borderRadius prop to Button and pass it 0.
7. Observer change

💻 Link to reproduction

https://codesandbox.io/s/blue-dream-bqwon?file=/src/App.js

🧐 Expected behavior

I expect to be able to set the borderRadius for an Input at the theme level.

🌍 System information

Software	Version(s)
Chakra UI	1.0.2
Browser	Firefox 83
Operating System	Windows 10

📝 Additional information

I am able to set borderRadius for Button in the theme and it works as expected.

[JClackett]

@with-heart Thanks for the response! makes complete sense to me now, thanks for taking the time to explain ❤️

[with-heart]

@JClackett If it worked that’d way, it’d break the whole theming system! I don’t think we’ve documented this very well, but the priority for styles is:

__css < baseStyle < variant < size < props < sx

This allows for a cascading system of styles, where we use __css internally to style components with the lowest priority and then layer the other styles on top.

baseStyle has lower priority than variant/size because if it was higher, then the other two become far less useful as you couldn’t customize any of the props they were using. You’d have to manually unset the props from the base and then add your own on top if you wanted them to be different, which imo would be far more frustrating than the current duplication.

The base style essentially just set defaults, and then variants and sizes are customizations on top of that. I can see how that could cause pain in some situations, but not sure how to change that around without breaking the whole model/causing larger pains.