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.

egghead
egghead
~ 2 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today