Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix as prop is not forwarded to target Component #988

Closed

Conversation

lesha1201
Copy link

Fixes: #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" />

@codesandbox-ci
Copy link

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 0493cbe:

Sandbox Source
Stitches CI: CRA Configuration
Stitches CI: Next.js Configuration

@hadihallak hadihallak self-requested a review June 2, 2022 14:13
@hadihallak hadihallak added this to the 1.3.0 milestone Jun 3, 2022
@EfstathiadisD
Copy link

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

@hadihallak
Copy link
Member

Hey everyone!

This change is no longer needed after the changes that we added in #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 hadihallak closed this Oct 6, 2022
@bmsuseluda
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants