Conflict between variant/size and style props

[viQcinese]

🐛 Bug report

When using Chakra-UI with ReactJS, style props are being overwritten by variant/size props on custom components. The documentation suggests we must use the useStyleConfig hook in order to have access to variant/size. I found two problems with this approach.

1. I have access to variant/size in chakra components without using the hook. I'm not sure if this is a bug or not. If not: what purpose does the hook serve?
2. When using the hook, other style props I might want to pass to my components when they are rendered are overwritten by variant/size styles.

💥 Steps to reproduce

1. Create a react app and wrap it with a Chakra Provider and a custom theme<ChakraProvider theme={custom} />
2. On the custom theme, create a custom style for the Button component. Define a variant with a custom font size. myVariant: { fontSize: "2rem" }
3. Creat a <CustomButton />component, as described by the useStyleConfig API.
4. Render side by side a chakra button and the custom button, both with the variant myVariant and the prop fontSize.

<Button variant="myVariant" fontSize="1rem">Button</Button>
<CustomButton variant="myVariant" fontSize="1rem">CustomButton</CustomButton>

4. Notice that the custom variant works for both the Button and the CustomButton, but the font size prop only works on the Button, but not on the CustomButton

💻 Link to reproduction

https://codesandbox.io/s/fervent-edison-rmlwh?file=/src/App.js

🧐 Expected behavior

• Style props should have precedence over variant/size styles
• Not sure if variant/size should work without the useStyleConfig API

🌍 System information

Software	Version(s)
@chakra-ui/react	1.4.1
Google Chrome	89.0.4389.114 64bits
Operating System	Windows 10 Home

📝 Additional information

Also, I'm currently using Chakra-UI on a work project. We are currently using the useStyleConfig API on custom buttons and checkboxes, but because of the bugs described above we are thinking of switching to out-of-the-box chakra components. Is there a reason we to keep using the useStyleConfig API?

[TimKolberger]

The sx prop has the highest style priority. Please note that, like in the chakra implementation the returned styles from useStyleConfig are applied with the __css prop.

const styles = useStyleConfig("Button", { ...group, ...props })

<chakra.button __css={styles} />

Cheers :)