Welcome back, everyone. In the last video, we start our button, but now what we need to do is we need to style our car dropdown and I'm going to teach you a new concept that works with star components as well inside of your styling strategy. So first, let's create what we need for car drop down. We need to convert our car drop down styles that pass over to 8.6 X-File inside of car drop down. One quick thing I want to note is that I've actually left out a very small feature, and that feature is t
hat when you have no car items, what we should show is that there is some kind of message that mentions we have no card items. So, for example, inside of car items, what we could do is say that if cart items Typekit length is existent, meaning that it's greater than zero, if a value of zero evaluates to falsely meaning that we have no card items, then we show the empty message. But when there is card items, then what we want to do is we just want to actually iterate through mapping the card item
s to the corresponding cart item component, which is pretty much all we have done up until this point. After this, then we need to show some kind of empty message. So this is where I would add somewhat of a span and inside of the span I would say your cart is empty. And that is pretty much all we need in order to demonstrate that we have an empty cart. So what I'm going to do is I'm also going to style the span as well. So going back to our car drop down styles, let's talk about how we're going
to convert this. So the first thing that we want to do is we want to, of course, style and make a style component, and to do that, we need to import in styled from style components. Once we have this, what we're going to do is going to say, OK, I have this, what I want to export out is the cart drop down container component, which is what this class pretty much reflects. And this is a stealth device because it's the parent level component. I'm going to capture all of these different styles that
we have. And then what I'm going to do. As I need to think about what I'm trying to also star here, these ones don't need any context anymore, meaning they don't need to live inside of the car drop down container because the targeting is not specific anymore. We can now just create new components that reflect what they are, because now we know will be scoped within our car drop down component thanks to star components. So here I can say export Konst empty message, which is actually that componen
t that we had just made inside of our car dropped out when it's empty and we can just copy these in like so. And then I'm going to do the same thing for our carte items, something say export konst carte items. And here you can call them items, container or car items. I'm going to call them car items, and here I'm just going to make sure to bring over these same styles. And now what you've seen I've done is I've left this button for last because this button. Is specifically targeting any buttons
inside of our component, meaning inside of our car drop down component. So what you could do is you could say for any button, I want this stop. But let's say you wanted to target specifically our own button. Not every button, but just our own custom button. The one that we made in our own component. How would you do this? Well, this is where we get a really powerful nesting ability and targeting select our ability inside of stock components. As I showed you before, each of these components get c
ustom class names when small components actually gets compiled. If you remember when we looked inside the inspector, we saw that each of these different components that we made using style components had a very unique, randomly generated string for the class name. And on that class name is how these styles got attached, which is how we're able to make sure that in our finely compiled excess, it doesn't actually conflict or clash. But this also means that style components actually knows what thos
e new randomly generated class names will be. And the way that you actually target them inside of your styling for a stock component is you can directly reference the style component that you've made itself. So, for example, we have inside of this file, other style components, as in cart items, knows that what comes before it is empty message and cart drop down container. But what this also means is that you can actually target these inside of your style. So if inside of empty message, for some
reason you want it to target your dropdown container, you can just do so like this. You can say, Hey, I want to apply styling on any components that have this cart dropdown container component inside of it as a child of empty message. So this is where the nesting applies the same as selectors when you have nested like we have button here. We're only targeting buttons that live inside as a child of car drop down container. What you're saying with empty message is you're saying, Hey, I want to tar
get any heart drop down container that is a child of empty message so you can target any style component and inside you can overwrite and make nested stops. So if you wanted to change the position, you can do so just like this. So what we want to do is we want to replace this button with our button component. But the things you remember about our button component is that our button component renders a regular component that in turn determines which of these three style components to render. So i
n order to target all three of them, which could be conditionally rendered, we actually need to import all three of our style component buttons. So to do that, I'm just going to go up here. I'm going to paste this in, and I'm going to make sure that we're going to the correct component. So we're going to go to button. And then from button, we need to go to button styles. So let's just make sure. Like this? And now we can copy all three of these. And here we can say, OK, I want you to target base
button. I want you to also target Google sign in button. And then I want you to also target inverted button, so if any of these three components get nested inside of cart drop down container, then apply these stars to them. And now that we save this well, we want to do is we want to make sure that we replace the correct components inside of our styling. So here I know I don't need carte drop-down anymore and I'm going to import and cart drop down container. I'm going to import an empty message.
And I'm also going to import in the cart items. And now to replace the correct components. So first, let's replace the diff. Let's also replace the empty message. And now let's also replace Carte items, which is also a do. And now it looks like I have an extra day there. So that's it. We've updated our code. Let's double check, make sure everything is working, including our new empty message. Now, back inside our application, we actually see that I have a resolution error for getting this compo
nent. So it looks like what happened is I missed a slash. And now, if we save this and we come back. We see that our application properly loads. We open up the car dropdown. We see our empty cart message. And when I add, we see that everything still works and our button still works. So there we go. The key takeaway here is that you can target inside of your style components different other stock components as selectors. So one important thing to note is that if you're going to use them inside of
the same style file, just make sure that whichever component needs to target an earlier one comes after. Because if, for example, in cart drop down container, you try to target empty message. Well, what you'll actually end up seeing is that this variable will not exist at the point of this style component being initialized. So that's an important thing to note. But other than that, you have a lot of power in this ability to target your stock components, as well as nested styling selectors insid
e of your styles now. So with that, what I want you to do is try and start the next component, which is card icon. Otherwise, we're going to do it and we're going to learn some more tips and tricks with style components.
Comments