Styled Components Full Tutorial - Style Your Components in React

[Music] hey guys how's it going i'm back here with another video and today i decided to bring this tutorial where i'm going to be teaching you guys everything you need to know about styled components so for those who don't know subcomponents is actually a react library or more well known as a css library which allows you to style individual components and apply them directly in your react application and it is a technology that i use in every single um one of my react projects so i 100 recommend it and for that reason i i'm really excited to actually teach you guys this so if you're a beginner um i'm going to go over the beginning part so like everything you need to know in the beginning i'm really quick because it isn't actually really hard to understand style components but the thing is there are so many different use cases or so many different specific things that you will encounter as you create a react application that usually it's really hard to understand from the documentation so i will go over how to solve those problems and show you guys exactly how to do it and before we get into the video if you guys can leave a like and subscribe if you're not subscribed i would really appreciate it because it definitely helps the algorithm push my video to more people which will massively help our channel grow so that's basically it let's get started with the tutorial okay guys so as you can see right here we have a empty react application here the left you can see um we have just a couple files inside of our react we have app.css app.js index.js and reportwebvideos.js i just ran create react app and i created this application one thing that i want to do is we're going to delete this app.css it's not necessary if you you can have a css file in the same um react application as like that you're using re install components however i just want to delete it to show you guys that we're not going to use any css directly like we're not going to have any css files in our project everything will be done from style components so the first thing we have to do is we have to install the library so i'm going to open up here the terminal and i'm going to push this a bit and instead of this folder i'm going to run yarn add styled components like this if you're using npm it's just npm install slot components very simple there's a dash right here between the words and it will install the library so as it is installing um i'll go over what exactly um style components do right so for example you can see we have here a div with a class name of app right so in css what would usually happen is you would basically just have um this app that you would access this class name in your css file and you would style it however you want however with style components you can style it in a like directly through the library and you can have something like a literally a component called app like this which wraps around an item and it doesn't have like you don't need to write div it knows automatically the app is a component that is a div but inside of it there's already the styles are already inside of here so you can just reuse the same component many times and it makes your code look a lot better but if you're a beginner you won't really understand what it means right now so let's actually get started in the implementation so so what i like to do is i like to come here to my src and create a folder called components and this right here um can hold like the components for whatever you want to create let's create right now um a component for a button let's do that so you can create here a file called button dot js like this and honestly whenever i'm creating a javascript file that is solely based on styling so for example when you're using style components i like to also put before the js and after the name of the file a style like this or styles whatever you want um it knows automatically just so i can identify what kind of um file this is right and inside of here what we can do is we can write all the logic for creating a button so what we want to do is we want to create a button that and put the styles directly using style components and display it in our app right so to do that we need to import the styled components library so i'm going to say import styled from styled components like this and this styled object right here it basically serves as an identifier to which html element you want to style so what do i mean by that well imagine you want to create a button right let's create this variable right now i'm going to say const button so this is the name of the component you want to create you set it equal to styled and then you press a dot and you just choose what html item you want to like make it represent right there's every single html item here but in this case we want to make it a button so i'll just say button and automatically when you render this in your in your screen it will know that it has it is a button with all the button functionalities and one thing that is important as well is um how do you actually put the styles right well with styled components it is kind of annoying but you need to put those back ticks like this and i like to just give it some space but the backtick over here and the back take over here and you write the css inside of here so for example if you want to set the width equal to 200 pixels i can do it like this and you may be wondering okay but why is your um like whatever you're writing inside of here not yellow right because my like it's not being it's not looking like a string right the reason for that is because i installed an extension which i definitely recommend you guys installing if you're going to use dot components it is called vs code styled components right here um it's really awesome basically it just converts like whatever is written in between these backticks to actually like look like css to to autocomplete as well so i definitely recommend installing this package if you want to it is really nice so what you do is you just put all the styling inside of here so let's create a button with with 200 pixels a height of like i don't know 50 pixels and let's make the background color like this be um something like um red right you can literally just do it like this and when we save this we also want to export this so that we have access to this in other files so we're going to have like we can make many different buttons and put all the buttons over here and just export them individually and i'll show you guys how to do that later but if i want to use this button component i can come to my app over here i can import from the file that i created inside of components right here button.style and i can import the button component as you can see and now instead of like i'll just delete this right here um if i want to render this button right now you'll see that it doesn't show anything let me refresh the page it just shows a blank page but if i put the button over here like this and i actually put something inside of here like um click this button like similar to how you would create a real button you can see that we actually have the button and it functions like a button i can click on it and it works but it is styled so what means is that i can actually copy this and just create the button like a couple times and i don't need to write the css code or at least i don't need to put the same css um class name in the button and it looks a lot nicer in my opinion because we don't need to be passing class names to the items so this is the basic use case for style components and there's many different things you can do but it's also important to understand um how to differentiate different items like very easily and what i mean by that is we're going to create three different buttons right here we're going to create a blue button a blue button and i'll just copy this again i'll paste it over here and we're going to create a green button and a red button like this green button and a red button like this so we're just going to change the color for all of them so i'm going to make this blue i'm going to make this green and i'm going to make this red so what happens is now at the top here i can import a red button the green button and the blue button and now i just have this components in in my in my project and let me just show each one of them so you guys can see um what is happening to them you'll see that they actually are displayed however there's a more efficient way of doing this we don't really want to create like a whole new component over here just for changing basic stuff like the color right what we want to do is we want to be able to just create one component called button and customize it however we want almost as if we're passing props to this component so how do we do that that's something that a lot of people get confused on and i'll show you guys how exactly to do this so if you want we're just going to delete this right here um we're going to delete we're just going to create one button and we're going to accept props inside of this button for the background color and to do that we have to come over here and use the javascript syntax to insert javascript inside of a string because remember we are inside of a string there are backticks over here and inside of here what we have to do is we have to call a function which takes in an argument called props and we just put the arrow function and over here we can access values in our props which we haven't passed yet we can pass a values inside of the components right here i'm going to delete um these two components i'm just going to call this button again because we changed it button and let me just delete this as well and just import button so the idea is um we're going to pass something like color equal no i'm going to call it back ground color like this we're going to pass something like red or blue or whatever we want we don't want to specify it on our component we want to specify it right here if we want to differentiate the colors right so what we can do is we can come over here and say that the name of the prop is background color like this and this over here will be shown as the background color that we put over here so let's test that let's come over here to our google chrome you can see that our button is red which means it's working right but now if i want to make this blue what do we do i'll just copy this i'll paste it over here and i'll change this to blue and now we should have a red and a blue button as you can see and we can do this for whatever one i can make this a violet as you can see we can just change colors and this is exactly how you actually pass props which isn't which which is amazing in my opinion um i this is one of the reasons why i love this library it's very simple to actually um customize everything and make your code very organized one thing that is important as well is to keep into account that basically most styled components project every single thing in the html or in the jsx will be um components right so for example right now we have this div right here called app and it's wrapping around everything because it's kind of like the container of our website it's like the whole page right but and usually we don't do that what we do is we can create for example over here a file called container dot style dot and container is just like you can call it whatever you want but i call it container it's just to represent a div that wraps around the whole page or just representing like a div that doesn't show anything right so what i can do is i can come over here and again i'm going to import the same stuff i imported over here i'm actually just going to copy this and paste it over here and i'm going to call this container or app container yeah and instead of being a button i can make this a div and over here i can make the width of this being to be like um i don't know 100 vw which means 100 of the screen and this would be a hundred v8 which means a hundred percent of the vertical screen and let's change the background color to something like um actually i won't pass props to this one i'll just pass like a simple background color let's make it light blue light blue like this and what we can do is we can import this at the top so import from dot slash components slash container dot style and we can access this app container here at the top app container and instead of using this div we can just use an app container over here and you can just copy this paste it over here and now we don't actually have anything in our screen it looks ugly i know but that's not the point i'm not going to teach you guys um how like how to work with css i'm just showing how to use this library to make your code a lot more organized now there's actually something that i haven't mentioned yet but i know that if you're starting to learn style components you will encounter it really fast and you won't know how to resolve it and what i'm talking about is what if for example i want to add a hover effect to this button or like an active effect or i want to add animations how do i do this kind of stuff well it's it's quite simple you you come here to the button and if you actually want to add a hover event all you do is you just add this sign over here which i forgot the name then this basically represents like i'm talking about the button that i'm inside of so this right here so you just put this then you put a colon and the effect you want so i want to hover right and you just act as if this was an actual css file so i'm saying right here is basically whenever this button right here is hovered i want to for example change the background color to um let's say coral it's just a random color so let's see if this works if i hover on this you can see this is exactly what happens and you can do this for every single property i can i can change this to active which basically means whenever i press on it and i accidentally did this whenever i press on it it's going to change the color as you can see it works perfectly and also one thing that i know a lot of you guys will be wondering is imagine for example i have in this button over here i want to actually change this right here i want to create a kind of a component just for this text i can call it text i can call it i don't know title button text whatever i want and actually i'll create it inside of this over here i'll just say export const i'm gonna call it button label and it's just gonna be a simple um how can i say it's going to be a simple h1 tag so it's not going to be dot button it's going to be dot h1 it's just a simple header tag and i want to put it inside of the um button actually i'll make this a label just because i'm calling it label right so it's just a simple text and i want to say something like um the font size is equal to like 25 pixels and the color is um white let's do it like this and now let's just import this here at the top button label and now let's implement this over here button label and i'll just implement it on the first one so you can see the difference between them button label right here so you can see that um one of them obviously has this label into their the button and the other one doesn't um but what i actually wanted to show is how do i for example how do i say that if i if i'm hovering the button which is a different component i'm hovering this right over here how do i change the color for the label which is something inside of it they're completely different how can i actually access and change um stuff from this label when i'm like hovering this button right here if you know what i mean what i can do is i can actually use this right here and if i say i can actually use this right here and say for example on hover and instead of here i can just put again um this symbol to represent that i'm talking about this and i can put some space and say that i want to access um whatever label is inside of this element so this just says similar to css you're just saying okay i want to access the label inside of this button and now you can put whatever you want inside of here so i can for example change the color for the label to be green whenever you hover the button so let's look at this um let's come over here if i hover this button you can see that the the label which has nothing to do it's a completely different component is still changing the color which is amazing and it works perfectly and yeah that's basically it for how to use this symbol right here just try to picture it like this um it's it's almost the same as css in the sense right however with css you would do something like um i don't know the class name so button something like this button then put some space and then say label inside of it and do it like this right so it's almost the same thing but instead you're putting you're removing this and replacing it by this and putting it inside of the hover right so this is the basic idea so now there is actually something extremely important um which is very useful which is basically how do i style an actual component and what do i mean by that is we have this button over here but it doesn't have any function like it doesn't have any functionality inside of it in the sense that we might want to create a component which is a button which is a different file like it's a completely different file we want to reuse it how many times we want but we also want to style it right so how do we do that okay so to do that you can just come over here and i'm going to create a file called button.js and it's actually going to be a reaction component as you can see right here and inside of it i'm just going to return a button like this and this button will say something like i can get for example the text that the button label like this can say something like button label as a prop and just display it in our screen so button label like this and this is basically our button right we actually don't have any functionality but this is our button we could have added an on click here we could have done whatever we want but what i'm trying to explain here is we're creating an external component a react component and we want to style it so that we display it in our in our app.gs instead of actually just putting the the like style components directly so to do that what we can do is we can import this button react component to our button styles so i'm going to come over here and say import from dot slash button and i'm actually not going to put it like this i'm just going to say button and i just imported this component and what we can do is instead of just creating this button like this i can put over here that i want to make this as styled then open and close parentheses and just pass the component right here and now it notes that this over here isn't of any html type it is actually of the type button which is a react component so let's test this let's let's come over here and um let's just do it like this right what we're doing is um let's delete actually both of this because now they aren't in the correct format let's just import button we're going to use a button label because it is actually a prop that we have to pass to this right here so if you write button label like this you can pass a text over here saying something like click here and this should work because we know that this styled button is of type button which is a react component with button label as a prop so let's check to see if this is working let's come over here and let's refresh the page oh i just realized that i called it button twice so we actually can't do that i'm going to change this name to styled button oh not this one i'm going to change the name for the styled button over here so styled button like this let's save this and let's come over here and change this to styled button and we can also come over here and pass the background color which is the color for the button um let me just close this over here and let's just call it i don't know violet again just a random color because remember in our styles we have a prop called background color let's see if it's it still works as you can see it doesn't and the reason for why it's not working is because for some reason you actually have to come to your whatever component you want to create and you want to use as a as a stout component and you have to actually this structure from the props a prop called class name and then pass this as the class name of the component so i'm just going to say like this and this over here will be the style this is representing whatever style we write over here so basically this is how we pass it to this component and now if you come over here you can see it's working perfectly on the same color everything is working perfectly which means it is working now finally the last thing i think is actually really cool to understand about tile components is how to create global styles so global styles are just styles that aren't specifically for a component um it's basically like imagine you're styling the body of the html element or you're trying to style like stuff that aren't actually components right so how would you do that because there's many different ways of doing it um the documentation is quite confusing on it so this is how i would approach this problem i would actually create here um a file called global styles it would be like on the outermost layer of my application so global styles dot j.styles.js something like this style.js and i would import here at the top from stout components they actually have something called create i'm just going to create it like this create global style and what you can do is you can just come over here and say export const global style so this is the style that you can put whatever you want inside of here that is going to affect the whole application and then call it create global styles and then just pass whatever css you want to pass over here so for example if i want to just access the body over here i can say okay body let's make the background color for the body in pink something like this let's also remove the margin and the padding because that that kind of irritates me i don't know if you guys realize but that's kind of it that's currently happening in our screen so padding zero pixels and you can see this is the difference this is how it is right now um now if we want to add this to our application what we can do is we can come here to the app.js and we can just import from dot slash global styles dot style we can import the global styles component and instead of like it's a bit different what you can do is you can just come over here and whatever like whenever you want like it doesn't matter where you're gonna put this just put global styles like this and it doesn't have to be like you can just self um close it as you can see right here when we save it our body will be actually um styled the color isn't appearing because we made the this container over here be this container container over here be 100 of the screen but if i made this like i don't know 90 i'm going to make this 90. you'll see that the the body is it's pink right like we said so yeah that's basically it this is how you add global styles and that's basically it for the video i really hope you guys enjoyed this video if you have any doubts please leave a comment down below i answer every single comment if you enjoyed the video please leave a like because i would really appreciate it it massively helps grow your channel and i'm putting a lot of work into this channel so i would really appreciate if you guys could help me grow so yeah i really hope you guys enjoyed it and i see you guys next time [Music]

Channel: PedroTech

Views: 25,671

Rating: 4.9385796 out of 5

Keywords: crud, css, javascript, learn reactjs, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, express js, pedrotech, traversy media, traversymedia, clever programmer, programming with mosh, tech with tim, freecodecamp, deved, pedro tech, styled-components, styled components, styled components tutorial, props, how to pass props to styled components, styled components in, styled components in react, css in js, react styled components

Id: -FZzPHSLauc

Length: 23min 54sec (1434 seconds)

Published: Wed Mar 17 2021