How to Keep styled-components Styling but Render a Different Tag or Component?

If you wish to switch out the HTML tag (or a custom component) that's rendered whilst keeping all the styled-components styling you've applied to a component, then you can simply use the "as" prop (v4+) to do this at runtime.

Consider, for example, the following styled-components component:

const MyComponent = styled.div`
  color: white;
  background: blue;

To render a <button> for example, instead of the <div> DOM element (as in the example above), you can use the as prop like so:

// styled-components 4+
const Foo = () => (
    onClick={() => alert('Hello world!')}

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.