Style an HTML Element with Styled Component

Style a React Component with Styled Components



Creating Global Styles with Styled Components

Adjust Style based on props with Styled Components

Animate Styled Components in React

Create and use a Theme in Styled Components

Style pseudo-selectors and classes in Styled Components

Using the `css` prop to define styles in Styled Components

Using the `as` prop to reassign the HTML tag

Use the `attrs` method to add HTML attributes in styled-components

Use Styled Components with the Object syntax

Style a component based on complex props with Styled Components

Styling React Applications with Styled Components

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

https://app.egghead.io/api/v1/lessons/react-using-the-as-prop-to-reassign-the-html-tag/subtitles

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.

Using the `as` prop to reassign the HTML tag

Share this video with your friends

Course

Styling React Applications with Styled Components