Using the `as` prop to reassign the HTML tag

Sara Vieira
InstructorSara Vieira
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

In this lesson, we will use the as prop to reassign the HTML tag that is associated with one of our styled components.

The as prop will be used to reassign a button element to be an a element

Instructor: [0:00] I have this button here and this button is already a styled component. As you can see here, it's a styled.button.

[0:06] Let's say that I want to add an A, a link and say a.href, and we can just add https://global.com. It doesn't really matter what's written there, but let me just fix it. Now, let's type Google and close this A. This A does not look good. Let's just be honest about it.

[0:29] What if we could reuse the button styles, but use it as an A. We want the button styles. I can just come here and say, "OK, cool. I want this to be a button." The problem is that hrefs don't work. It makes sense. That's how buttons work.

[0:44] We don't want to add this on an on click. There is a prop called as, which we can pass to any styled component that will basically reassign the HTML element. In this case, it's a button, but this part can be actually reassigned.

[0:58] If I come here and I say as and I add the HTML button at HTML component I want to replace it with, like this case A, this actually becomes a button. You can see that the styles are the same. We just have the sticks underlined, which is fixable in both by just adding text decoration and adding none.

[1:20] Now we have a completely working A as you can see and we have a button that doesn't go anywhere. This is how you can reassign HTML elements in styled components.