If you want to keep all the styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the "as" prop to do this at runtime.
Engineer | Lover of dogs, books, and learning | Dos XX can be most interesting man in the world, I'm happy being the luckiest. | I write about what I learn @ code-comments.com
Good point! When I wrote this I hadn't yet found polymorphic components. When I did a few weeks later, I wrote about them as well: stephencharlesweiss.com/blog/2019-... :)
(One point: I have had trouble with polymorphic components in my typescript app. Haven't dug into it too deeply yet, but just something to keep in mind)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Styled components has a property for this kind of use cases: styled-components.com/docs/api#as-...
If you want to keep all the styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the "as" prop to do this at runtime.
Good point! When I wrote this I hadn't yet found
polymorphic
components. When I did a few weeks later, I wrote about them as well: stephencharlesweiss.com/blog/2019-... :)(One point: I have had trouble with polymorphic components in my typescript app. Haven't dug into it too deeply yet, but just something to keep in mind)