stitchesjs / stitches

[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
https://stitches.dev
MIT License
7.75k stars 253 forks source link

Polymorphism for Composing React Components #1088

Closed Code-Victor closed 2 years ago

Code-Victor commented 2 years ago

I need "as" prop for polymorphism in a styled react component. I've accessed the styles and variants through the className prop, but I don't know if there's a way to get the as prop.

const baseButton = ({ onclick, className, children }) => {
  //...
  return <button className={className}>{children}</button>;
};
const Button = styled(baseButton, {
  //styles...
});
hadihallak commented 2 years ago

Could you please provider a full example of what you're trying to do?

Code-Victor commented 2 years ago

I wish to have this sort of functionality.

<Button as="a" href="#" >hello</Button>
hadihallak commented 2 years ago

That's already part of Stitches but if you do that, baseButton would be replaced by a.

hadihallak commented 2 years ago

we have new changes merged with canary that will allow you to control polymorphism using a new withConfig API but that isn't released yet

Code-Victor commented 2 years ago

Thanks so much for the assistance using the "withConfig" API would come in handy in solving the issue 👍