stitches icon indicating copy to clipboard operation
stitches copied to clipboard

Fix `as` prop is not forwarded to target Component

Open lesha1201 opened this issue 3 years ago • 2 comments

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" />

lesha1201 avatar Mar 30 '22 12:03 lesha1201

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

codesandbox-ci[bot] avatar Mar 30 '22 12:03 codesandbox-ci[bot]

Do we have any plans to merge this? In general there are a few 0PRs worth merging. Anyone from the 🧵 team?

EfstathiadisD avatar Aug 05 '22 07:08 EfstathiadisD

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.

hadihallak avatar Oct 06 '22 17:10 hadihallak

Hello, do you know when this change will be released in a stable version? Thanks

bmsuseluda avatar Feb 17 '23 10:02 bmsuseluda