Use the `attrs` method to add HTML attributes in 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.
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.
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
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!