Learn Styled Components In 15 Minutes! | React Tutorials

hey guys this is Lucas from Belle Epoque Academy and in this video we are going to be having a look at using styled components so I will show you how to get started with styled components as quickly as possible so first and foremost let's go to the star components website over here it's just start components calm and it looks pretty cool it calls itself visual primitives for the component age but probably the best way to describe sound components is calling it a CSS in j/s library so there are quite a few options like this up in it and it's not a concept that is unique to react but it is most commonly used within a single page front-end frameworks such as react you and you like that kind of stuff so style components specifically is for react and it basically allows you to write your CSS as kind of part of your component it's SuperDuper cool I'm going to just jump straight into it and show you how I like to use it so first and foremost let's just add startup components as a dependency and I'm going to just run the watch command against and inside of my root component here so first and foremost I have this on my page just the root text here so let's just say that now we want you to write hello world but we wanted the text to be read so what I would do is I probably first and foremost I've noticed I'm using an h1 here so if I want to keep the h1 I can do that as well so I'm going to write import style wood from style components like this and then I'm going to write twice let's just say we call this one as we can call it say for example just heading or like the style the heading and then I'll write style h1 remember I Museum 828 and I could write color is red and let's also do tricks to line sense up because why not now you'll notice that I also have the right kind of syntax highlighting for CSS inside of here that's because I'm using Babel JavaScript so you might like to use that as well you can just install that and it kind of depends upon your editor as well I'm using the best code so you also might be slightly different so let's just write heading inside of here and let's write hello world like that now lets me say you'll notice if we refresh over here we get hello world over here at the center now before we continue let's have a look at how this actually works you'll notice that we have two classes here we have an SC BD dhaa and then G wmz now obviously I didn't write these in these are generated by style components and they correspond to a stile italic which style components naturally automatically creates and generates here on to the page so that's kind of how it works and like I'm not going to go into the internals too much here but that's how you use style components on a very basic level now if you were to kind of extend this across your whole application what would end up happening is like you might have for example let's just say we have a root here and let's create a separate component on our page and let's call this like a an article and we're going to import article like that obviously article doesn't exist just yet so I'm going to just create that right gear so the body cool article j/s and once again like I say this with my other QuickStart videos I'm just doing this with the directory structure that I personally prefer you don't have to do this in order to get it to work but this is what I like to do so I have an article directory and inside I have index rjs which imports and exports the article file and that we can do it like that import articles from that directory and then we have this heap so now we're going to save this again and we're going to just you see we've got article over here so now inside of articles rjs here let's just say that we wanted to have something a little bit more complicated let's say we have a section on the left and a section on the right so I might do something like import style and then style it frog style components lots again and let's just say we have a wrap up so slow it up give and this one we can do display flex flex flow Road no rap so now we can call this one wrap-up and let's just say we have our main content is on the left and our sidebar is on the right so you might do something like the main content gear and we're strapping content inside like that and we have a sidebar I'm focused on the sidebar like that it's obviously an easy crazy suit I like to have a helper medical auto and I'm creating my style components here just because it makes it easier to read now I do like to in like my style components where they're only used for this one page so you can see that's what I'm doing here so now for main component let's just do a background color is going to be blue now it's going to look terrible I know it but that's not the point here and let's just give this flex one and then we have our sidebar which is starred octave flex zero auto and let's give this line table width of say 200 pixels here so color red as well and I like to do half a medical order for my properties I'm just picky like that so now the time work and you see we've got main content here on the left and we've got the sidebar over there on the right and let's just right click inspect the element again and you'll notice that we have specific classes for each one of these elements so there you go that's kind of how you get our component set up this is honestly really really easy to get started with and I love that about style components but I also love how there is a lot of flexibility that you can have in terms of just applying lots of configuration into the whole style component thing and one thing I want to show off without getting into too much detail is thing because this is something that I use quite a Fitbit so in order to get things working we need to have a theme in context so this is what we need to get essentially get working as a provider if I can just find that here on the page it should show me here's a thing provider but let me just check the API gives a we can actually just copy it straight away so we've got think provider over here and that is how we use it okay so what I personally like to do for this is if you look at the directory structure over here is I'd like to have well I usually have a shared directory or I stole my solid components theme but I'm going to just create the directory here now all the star components and then I'm going to call this one thinking about Jas like that alternatively you can probably do like even like 10 15 barges which is probably better in this particular case and then what we can do is for this file here I have a couple colors now this is how I personally like to do it I actually have this website that I like to use it's called color blindness of home collimate hue and essentially what this allows me to do is it allows me to give every single color a different name or not every color but life basically gives some different names of most colors here as you can see the colors change so what I like to do is let's just say that I wanted to have an application with this particular shade of blue so this one here is called regal blue so I'm going to copy this shade of regal blue here and inside of my theme I'm going to do X what constable blue is equal to this color like that so now once I've done that let's just grab one more color let's say we wanted to grab for example a complementary let's just take a shade of gray right so like we have maybe something like if I can get it on the right scale here there we go and let's say that we wanted this shade of break here this one's called Jim Gray 6-3 6-3 6-3 so we're gonna use that ex-cons Jim Gray is equal to and then just copy that in like that and now we have these two colors alphabetical order personal preference so now that we have those two what we're going to do is I'm going to go into my index rjs here and I'm going to import theme provider from spiral components so now after doing that I'm also going to do import or as theme from dot slash config such thing like so and what this allows me to do is import all of my exported constants here inside of a theme object so now I can do things provide up theme is equal to theme like so and grab this type of thing provide up and put it off to the roots and you see you've gotta think about the things will seem around at our route so now if we were to go back into our article over here and instead of using the colors blue and red let's just say instead of this bloom you wanted to use that shade of regal blue then we put in this inline kind of function and this works you don't have to really worry too much about how it exactly works but this is what we would do we do props not beef don't regal blue and this allows us to get that blue color so now if we save this and we have a look at our page you'll notice that we have that shade of region blue so let's just make this whole thing look just a little bit nicer so that it doesn't look like a complete eyesore let's go to the key from a heading and let's change it for the heading as well props top things on regal blue and now we see we've got that blue out here this blue here and let's just say we want it out on a white for the background and let's just say we have a patty of may be say 10 pixels here for the main content so there's a little too terrible and we can have that same heading for our sidebar and for the sidebar background color we're going to use props pop star theme dot and let's use Jim Gray and let's see how that works we've got that side over there colors also going to be white so we've got our sidebar content and halal world up their life so and now you see we can use the theme and you can now see how we can use this to kind of create a consistent style language across your whole application and sometimes across multiple applications because this file here you can kind of save and you can use in multiple projects or in multiple websites in the same project and like a mono repo or something so it just really depends on your needs within your project so now that we have that in place and we have our main content and our sidebar I also want to show off just a few more things with regards to the whole whole shebang here and more specifically this probably relates better to things like buttons so what I'm going to do is I'm going to create a component over here and I'm going to call put this one inside a shared directory once again this is how I like to do it if you don't agree with me you don't have to race me in the comment section that's totally fine I really don't care um because this is just how I like story and I do have my reason I'm not here to defend it so I'm going to do it a button badge is like so import style from style components and let's create a button like this so input cons my typical style dot button is back and let's get here and let's write background color and let's grab in that shade of blue so top something's not regal blue if I remember correctly my memory here is terrible so regal blue that is correct and now let's also grab the color white and let's just do your parents so this is a really really simple button so far let's just get this X portion then we can slowly start to customize the styles once we get it here onto the page so we've got main content here let's just put this one inside of a P tag because why not and let's put a separate feedback and decided here let's put a button links right just hello click me or just click me here probably is better here and then for our bus and I'm going to the import button from hash components I share such button this will not work I'm going to ctrl C this over here save that I'm going to go into package JSON and I'm going to add in an alias inside a passage so this will basically allow me to just access the components directory like that using an absolute aliased path like that so now if I do y'all watch again it should work and you see now the whole thing is built and we go over here and we have a nice button now let's start over splattered a little bit more it does look pretty nice calm incidentally let's just get it so that it's in a really nice place and we don't really have to mess it but too much so let's get one pixel solid white and then from the padding maybe we can do like chatting like to five PM 2.5 en like so now we have that patio BK so we have a button it looks pretty nice let's also add a hover effect so for follow when you do is you do this kind of scene times here for hover and then what we do is inside of here let's just say let's just do a background color is props pop star theme off my bag pops nothing the reason blue is the color and the background color becomes white like that and let's add in a transition or background color 20 to 5 seconds color up 1 to 5 seconds as well so now let's save that let's also add occur so on 20 seconds white not so now you see you've got a button we hover over it and it does that nice thing there so that's pretty cool and our button is working just fine and I just showed you how to add in a custom pseudo classes and pseudo states here pseudo selectors here so that's how we do that pug here so I also showed you how to add pseudo selectors and then also obviously how you can do like before after cetera that was not how you spoke before but anyways so now we've got Holly here what I want to show you though is configuration so let's say we have a version of this size but then what if we wanted a button that was a little bit bigger then what we could do is we could add in a separate like have a separate style component right like copy everything here change the font size and whatnot but we don't need to do that because what we can actually do is let's just say that we have another budget year and we give it a size prop and we do size LG and let's just do another button here and how about a size of SM so actually for the sake of this one P let's call it a little smaller large like so and then what I could do is I will go here and then I'm going to put in a function like this now this is kind of similar to this one except I'm just kind of expanding apply that size for curly braces and we're going to add a little bit more fear so I'm going to right switch prop slot size in here like so and let's just put in small and for the sake of small I'm going to return font size and I'm going to write 0.8 oh let's just take let's just do a couple pixel sizes cuz it's easier to understand font size 12 pixels with us : inside of there and then I'm going to also do large and then large can have a font size of let's say 20 pixels and then let's just say that the default font size give because obviously if these are returned then we go down here it's going to be 16 pixels or we can like say medium or whatever but this is kind of how you would do that now let's save this and have a look and you'll notice here we have three different button sizes and that's pretty cool so that's the kind of configuration that you can do here and if you want to do this kind of stuff in line for example if we wanted another button here that would block and we might do like button block click me like so and then you can kind of style that as well so then you can do like let's say we go down here do one more and then I was going to do this one has an inline but I guess that's not gonna work so we can do like if pops dot block then we can do it like return and you can put back to in here as well and then we can do like let's say display block with a hundred percent so like that's usually what you go for and now this button fills up like that like I said I previously mentioned about using it in life so we might do something like another legend fear and we might give this one like say you know water and maybe like block and also no bata cuz why not and then for no border what I can do here is basically put this one in a prop and then I might do like drop star no border in which case you would do zero otherwise you would do one piece of solid white like that and that also works you know so now we've got this button here which has no border so there you go that's kind of configuring and this can become incredibly powerful because then you can use this and you can configure the different kind of things so now even just one single button style component in about 30 lines of code we can have support so many different button types and it just keeps getting better and better whilst helping to maintain a consistent design language across your application so that's the most basic use of style components it does get more complicated than this and for good reason there are some really cool things that you can do cell components but for this video I just wanted to show you how to get started hope you guys have enjoyed this video and make sure to LIKE and subscribe this has been Lucas with better coding Academy and see you guys later

Channel: Better Coding Academy

Views: 29,131

Keywords: javascript, web development, programming, coding, es2015+, react, jsx, styled components, css in js

Id: 17AwVXg5lHk

Length: 15min 12sec (912 seconds)

Published: Wed Oct 16 2019

Reddit Comments

[u/FreshOfTheEast]

Styled Components on Speed