stitchesjs / stitches

[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.

Home Page:https://stitches.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Polymorphism for Composing React Components

Code-Victor opened this issue · comments

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...
});
commented

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

I wish to have this sort of functionality.

<Button as="a" href="#" >hello</Button>
commented

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

commented

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

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