Styled components are my favorite approach to styling react components because they combine the best of CSS and CSS in JS. The way styled components work is that you have a styled … I guess it’s a dictionary with a bunch of predefined basic components, divs, H1s, and so on. You say styled.div and use ESX template strings to define normal CSS.
The idea is that inside the ESX template strings you’d have normal CSS that you can get from anywhere else you would use your CSS and you wrap it in this … They create components with predefined styles. Let’s see what that looks like in practice.
We’re going to use styled components to start our message component. [inaudible 00:00:43] styles styled from styled components. Let’s start with the avatar, narrow image equals styled image and our ESX string and we say with … Here instead of using the image element, we use narrow image. Perfect. We can say that it has a width of 150 pixels to make it a little bit bigger.
For our main component, we’re using text here. It’s red when it’s hovered, so let’s make a name styled component. It uses a styled paragraph, font weight is bold, and if we have props, if we say that it’s hovered, background red. Instead of using text, we’re going to say name style hovered equals … Yep, and it works. It’s still bold and it turns red when you mouse over it.
I can’t find an excuse to do it right now but if you want to extend your styles, let’s say you want to have a button that is a styled button. If you want to make a button primary, you say button.extend. Here you say let’s say background red, so that’s how you extend styles. Once you already have a styled component, you can use .extend to infinitely add more CSS. That’s why I love styled components. They give you all the power of CSS and JS while maintaining all the power of having normal CSS [inaudible 00:02:10] that you’re already used to that you can copy/paste from anywhere, even from your old code.
Know someone who wants to learn React and its whole ecosystem? Share 👇