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

We will learn about the `attrs` method that allows us to change and add attributes to our styled elements.

We have the two buttons that we made in a previous lesson. We can add `.attrs` onto our `styled.button` to be able to add on types. `attrs` can return an object or a function. We will see the difference between the two and why you would use one over the other.

https://app.egghead.io/api/v1/lessons/react-use-the-attrs-method-to-add-html-attributes-in-styled-components/subtitles

Sara Vieira: [00:00] I have these two buttons here and these two buttons as you can see have no type assigned to them. It's always good for buttons to have at least a type of button and for accessibility purposes and also for readability in terms of the DOM.

[00:13] It's hard for us to remember this as developers sometimes. That's why I want to talk about attrs, which are a chainable method that exists in styled-components that allows you to push attributes into your actual HTML element.

[00:28] Using that, we can actually "fix these buttons". Let me add attrs here. This can return an object or a function. In this case, I'm just going to return an object and I'm going to say that the type is now going to be equal to button. By default, all of the buttons will have a type of button.

[00:49] We do have a problem though, which is that if this one for example is supposed to have a type of submit, it will never get overwritten, because it gets here and it's like, "Oh, OK, you're one type of button." Whatever it is here actually overrides what is said here, which is not good.

[01:05] Let's do this in a way that this can actually get to props. As I said, this can also return a function. I can say props, and then do this, close it here and here, and now the props are passed into here. I can say props.type, or it is a button.

[01:23] In this case, you can see that we have a type of submit, which is the one that I added, and then we have a type of button. This is how you can change the attributes of an HTML element using styled-components.

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

Share this video with your friends

Course

Styling React Applications with Styled Components