Fix `as` prop is not forwarded to target Component
Fixes: https://github.com/modulz/stitches/issues/979
Previous behaviour:
const StyledButton = styled('button', {
color: 'red',
})
const Button = (props) => {
return React.createElement(StyledButton, props)
}
const CustomStyledButton = styled(Button, {
backgroundColor: 'blue',
})
// Renders: <Button {...} />
<CustomStyledButton />
// Renders: <a {...} />
<CustomStyledButton as="a" />
New behaviour:
const StyledButton = styled('button', {
color: 'red',
})
const Button = (props) => {
return React.createElement(StyledButton, props)
}
const CustomStyledButton = styled(Button, {
backgroundColor: 'blue',
})
// Renders: <Button {...} />
<CustomStyledButton />
// Renders: <Button as="a" {...} />
<CustomStyledButton as="a" />
This pull request is automatically built and testable in CodeSandbox.
To see build info of the built libraries, click here or the icon next to each commit SHA.
Latest deployment of this branch, based on commit 0493cbeac5c8271492a7277352d7594fc271edec:
| Sandbox | Source |
|---|---|
| Stitches CI: CRA | Configuration |
| Stitches CI: Next.js | Configuration |
Do we have any plans to merge this? In general there are a few 0PRs worth merging. Anyone from the 🧵 team?
Hey everyone!
This change is no longer needed after the changes that we added in https://github.com/stitchesjs/stitches/pull/1103 which allow you to control how Stitches should handle its props like as,css or any Stitches defined variant.
Once this is released you should be able to manually override whether Stitches should handle the as prop or not:
const { styled } = createStitches()
const StyledButton = styled('button', {
color: 'red',
})
const Button = (props) => {
return React.createElement(StyledButton, props)
}
const forwardAsPropConfig = {
shouldForwardStitchesProp: (prop) => {
if (prop === 'as') {
return true
}
},
}
const StitchesComponent = styled.withConfig(forwardAsProp)(Button, {})
The changes are merged with canary and will be released as a beta soon.
Hello, do you know when this change will be released in a stable version? Thanks