How does `as` props work

Description

I just encountered a problem. When I was using as props to transform ChakraUI’s Box to another 3rd-party functional component, say Form, everyting went well, but Form has its own onSubmit props which collided with that of Box. Here was the problem: the type of onSubmit is still the same as that of Box’s onSubmit props, rather than that of Form’s. If I want to keep the type of Form’s onSubmit after using the as props of Box, what could I do? A sandbox was made for reference. Notice the error reported at Line 41. To try to figure this out, I attempted to find answer by googling or digging into the source code of ChakraUI but in vain. I am very curious about how the as props works? Any response will be highly appreciated. Or if you could point out where is the as related source code? Thanks so much in advance.

Link to Reproduction

https://codesandbox.io/s/epic-christian-3mfvct?file=/src/index.tsx:696-728

Steps to reproduce

1. Go to ‘…’
2. Click on ‘…’
3. Scroll down to ‘…’
4. See error

Chakra UI Version

2.2.4

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[itkrt2y]

I just read the internals for the first time, so I’m sorry if I made a mistake

TL;DR

as props are processed by emotion, not ChakraUI. https://emotion.sh/docs/styled#as-prop

Process

1. Box is created by the chakra factory function

https://github.com/chakra-ui/chakra-ui/blob/88e812c3a6d99554965b54856382916b6fbf6774/packages/layout/src/box.tsx#L18

1. The chakra factory function formats the chakra theme into an emotion style object and call emotion with this. In this step, as props do nothing.

https://github.com/chakra-ui/chakra-ui/blob/88e812c3a6d99554965b54856382916b6fbf6774/packages/system/src/factory.ts#L16-L23 https://github.com/chakra-ui/chakra-ui/blob/88e812c3a6d99554965b54856382916b6fbf6774/packages/system/src/system.ts#L9 https://github.com/chakra-ui/chakra-ui/blob/88e812c3a6d99554965b54856382916b6fbf6774/packages/system/src/system.ts#L78-L81

1. Default exported function from "@emotion/styled" is createStyled in emotion.

https://github.com/emotion-js/emotion/blob/b8d45d4587de69a1a6fd80d9543795e3795ca530/packages/styled/src/base.js#L54

This function is import styled from "@emotion/styled"'s styled.

1. The final tag is decided here

https://github.com/emotion-js/emotion/blob/b8d45d4587de69a1a6fd80d9543795e3795ca530/packages/styled/src/base.js#L107

1. Define component with FinalTag

https://github.com/emotion-js/emotion/blob/b8d45d4587de69a1a6fd80d9543795e3795ca530/packages/styled/src/base.js#L168

[TristanWYL]

Hi @itkrt2y Thanks so much for your exhaustive explanation, and your reply perfectly solves my concerns. I tried so much to dig into ChakraUI’s source code, while ignored that of emotion. Sigh… How stupid I am. Thanks so much!!!