Styled Components Tutorial - Crash Course [2020]

hi there my name is Fidalgo and today i'll teach you about cell components so staff components are basically your CSS in JavaScript there is a whole argument out there if it's better to use CSS modules or style components I'm not going to go into that I prefer to use cell components so I read my CSS in JavaScript so that's what I will be teaching you today if you want to know more you can go to their websites and under motivation there is a whole section explaining why you should use style components and why they created it to start we're going to bootstrap react project I open my console on PS code to do this I eat control tactic on my keyboard and now I'm going to do NP x create react app thought to create a react project on this folder and I'm going to press ENTER and we're going to wait for for this to install now that our create ragtop project is bootstrap what I like to do is to delete everything inside the source component I'm in the source folder so let's delete that so now I'm just going to create a new file called index that is and another file called app is inside here I'm going to import react from react and I'm just going to do a normal functional component so Const app equals function and I'm just going to return they've sync app and then I'm going to export my function so support my component into my index file I'm going to import react from react I'm also gonna import react Dom from react on I'm also importing my app component and I'm gonna create a Const called route which will be the the route live that we have on the index.html down here I'm gonna do route the document dot vary by D route and then I'm gonna do react on that render my app component on my route diff I'm going to open my console I'm gonna do yarn start and you should have our react project created so if we add over to localhost 3000 exactly we have our create now that we have our app bootstrapped let's install stell component so that's the yarn add style - component and didn't need to do anything else create react app already comes prepared to work with style components so now that we have style components imported let's close this up let's go into our app and let's try to style to style something so let's do for do this we do import style from start components and now imagine we want to create to style this app here how will we do that so before we will do something like this and we'll say title and then we will say + name and pass it a class right and then style like that will start components we will use an es6 feature which is called tag template little literals and what it is you might have seen where you write JavaScript with backticks and you write some text here and then you interpolate the text with JavaScript so to start the component here we just do for example Const let's call it title and then this will be styled and that and now we're going to tag it so a style of h1 right and now we write our CSS in here so we can say color red we can say font size I don't know 25 Ram and you will see my coach jumping around from time to time this is because of the preacher extinction that I have installed so now we tagged we use a tag template literal to put our CSS inside here and this automatically will generate an h1 tag with these styles so right here we don't need the h1 anymore we can just do title oops we can just do title and say my style title here and if we save and you go to our app my style title right it's a little bit too big but another thing that you can already see that style component is nice for is when you look at a component and you look at what's being rendered inside a component you'll immediately see oh this is a title oh this is a card section this is a I don't know a paragraph you get more descriptive names of what it is instead of having for example each one and then one Dave and then another div and then a section and then an article and then every its it can become a little bit confusing while we sell components if you name them them properly you can immediately see what it's being rendering rendered or on the Dom so in the same way that we created an h1 we can create other HTML tags so if we can do a constant section and this will be a style that section right section and now we can pass our CSS here so we can say adding to RAM and we can say margin I don't know - RAM - so now if you use our section here so we can just say section section and now if you go to our browser and you refresh if you if we inspect our elements here we'll see we have outer section and inside our section area about h1 and we can see that our section as our our CSS does so in a nutshell this is what style components is so now that we have a brief overview of what it is let's delete this and let's leave power ok let's delete this and let's create something more more meaningful so let's for example let's create our let's call it main wrapper and this will be a style section right let's give it a width of a hundred percent max width of a hundred pixels and margin zero author for example so this will be our main rapper here we just gonna wrap everything into this man wrapper you Oh what the hell no you so now we have our our main rapper created that's now for example create a button for that I'm going to create a new folder here called components and inside components I'm going to create a button that yes file here I'm gonna import react from react import from style components right now our button component be a but Const button and this would be an error function and you were going to return and for now let's do and now let's export default button now let's go to our app and let's import our button from components - button and now here let's render a button but so how I like to do is here I'll get the children and then inside my button I will render the children children now everything we pass inside the button will be rendered inside the button so let's call it button or my batter my button save this if you go to our Chrome we have our button right here so now let's use style components to to start the button so imagine that our button has and I'm gonna call it style button it's a style that button and I know let's say diving one ram 1.5 ram on size 1.8 ram color I don't know fifty-three line none let's see this looks and now here obviously we don't need to render the button we render the style button and here is our button we can remove the border from it oops okay and we can say caller [Music] let's make it like this and let's make the color of the button white I don't know I'm just okay so now imagine that you have two types of buttons you have a primary button and we have a secondary button and if your button is primary you want the color of it to be I don't know green or purple or whatever since this is a component in the end you can pass props to it so imagine that here we say primary right so now here on our button we can get our primary prop so you can say primary and since style components are components in the end you can pass it so we can you can say primary equals primary and now here since this is a template string you can interpolate JavaScript into it right so here in the color for example remember that you can interpolate JavaScript here by doing a dollar sign curly braces so here you can get the props right so you can just get the props as a pair parameter and then do a function and then return from it so you can say if props dot primary I want my color to be red otherwise I want my color to be white and now if you go to our button the text is red so now if you go here we can create another button that it's not primary and collect my button my primary button and now if you go here you see we have one button and another button and one is red and one is white obviously since this is JavaScript instead of getting the props here you can use this structuring so you can use the function here and destructor the primary only and then here you can say if primary exists it will be red otherwise it will be white and the same thing will apply let's just keep our section a display of flex and flex direction of column okay there is our two buttons let's give a margin to our button so we can say margin bottom run RAM for example there you go so if you have to change a lot of stuff based on your primary prop instead of doing this all over the properties you can just something like this so let's put this here white and now I'm going to show you first a bad practice so imagine you do here primary and then this is your function and you do if primary exists and and now you're going to start doing your stuff here so you can do color so imagine that your primary button changes a lot of stuff instead of only one property you could go and do with color and then if its primary it's white otherwise it's another color font size if its primary to this otherwise it's that other thing but we can do something else and I'm showing you you here first a bad practice so obviously we can interpolate a function here and we can get the primary button the primary prop and we can say if the primary exists so if the primaries is to execute this code and here I'm gonna do color red and you can already see that my syntax highlight broke because you shouldn't do this but let's just first try to see what happened and I'm gonna see I'm gonna say that the padding and now here imagine that you want to interpolate another thing so another property to get so let's do and no bet let's pass the preparing and then we can say return just depending and now let's say that our prop let's not say padding let's say background color you can even see that I don't get hints anymore of what I'm supposed to write while here if I do background I get syntax but let's say let's pass the BG color as a prop and just return it here Koller and now let's get this prop here and let's pass it to the component okay not in our app let's room the padding and let's say that this is I don't know violet yeah and now if we go back to our browser you can see that it is putting here but it's putting it as a function and that's why you can't do this so if you want to interpolate the net nested stuff there is an upper called CSS so if you import the CSS from style components and now here instead of doing this you do an CSS and now you tag the CSS property and you can see my syntax highlighting is back and now you can see that this will work so as you can see my interpolation - of interpolation is working so my point with this is you could still if you don't want to do nested interpolations you could do this and this shouldn't work but the color red would work as you can see it still works but I don't recommend you to do this because as you can see your syntax a light is broken and this will be bad for a future developer to come and see stuff like this so just always prefer if you want to do nested interpolations and if you want to change a lot of styles based on one prop just use the CSS helper this is becoming a little bit of a mess so let's recreate these Styles just for practicing purposes so let's say for example that let's create our button and let's give it a background color of white for example let's give it a caller of I don't know Rath for example a font size of 1.2 ram margin of one RAM for example let's give it some padding let's give it the order for example and let's keep it about the radius of pixels let's see okay it's looking better so imagine that now this is our normal button and we have a valuation of a primary one so as we learned we can interpolate stuff here so let's say primary and then primary and you oops primary and am I forgetting something I am so we tagged this with the CSS and now let's say that our primary button the background color instead of white will be the other one so palette palette red the color of the button will be white and I don't know the border caller [Music] yeah let's let's make it let's give it a box shadow for example and now I've Ram no zero at five Ram 1.5 Ram be a zero zero so black back black point two for example let's go and it's already looking looking better so now imagine that you want to extend these styles and let's just delete this and these two you want to extend this stuff this is quite common for you to do either you have a button that you want to extend the styles on or imagine that you are using some library and you import for example who are using material UI or something like that and we import the button from something else right it's just a component in the end you can style components so what would you do for example in this case let's call it a super button and this instead of being a Styles button what we do is we can do this is a function so we can do style and then we can pass it our style button and now just as we address it we did before oops we can do our Styles here so let's say font size in this case 2.5 RAM and now we have us a button that will inherit all these styles but will be bigger so let's when render here for example our super button you so now we'll return two buttons obviously this is not a good practice but what am I doing wrong what am i doing wrong we need to close our return okay and now as you can see we have our normal button and under it we have the button with the exact same styles but just with a bigger font font size so you can do this for when you want to extend styles so as I said if you are using something from a library and you kind of like their styles but you want to change the color of something or the background color of something you can extend their styles by using the style function and pass it in the Stealth the component that you want to style and then just styling it normally a nice use case for this would be for example imagine that we are using react routers so normally when you have a link you import the link from react router of course I'm not going to install it and then you can just do for example comes I don't know style blink for example and bear in mind that you always have to use capital letter on your staff components because they are components in the end and then this will be a style link and then you just write your status here yeah something that I've seen some people do is to put their Styles inside the component don't do this this is a super bad practice it will impact performance a lot so don't do stuff like this style I don't know style title equals style h2 for example baller blue and then you can render it here this will work oh it doesn't even work oh no this is my reactor utter importance morning okay so this will work but it's super bad don't do this this is super bad for performance just keep your staff components outside of the component itself another thing that you might want to do is to for example reuse components all over your page so in this case for example please I'm gonna just create a folder here called style you can call it whatever you want this is not a naming course and that's just to index is here and now here I'm going to do import styles from all components I'm gonna import react from react enough for example I'm going to export Const let's call it for example let's call this rapper and then style that section and we have a rapper that we like a margin-top oops a margin top to ram and let's say the background color of this rapper will be this one I don't think we even need react here so now we have our rapper here that we can import whenever you want so what we can do is imagine let's go to our button component and here we can import our rapper from oops from our style um file and now here we can use this so instead of using this reax fragment here we can use the wrapper here and if we save and if we go to our while you can see we have our wrapper around both buttons this is nice if you want to have for example I don't know a wrapper like this if you want to have like a margin that goes that you reuse all over the place anything anything you can pretty much put style components whatever you want and export them and import them into your components and reuse them in the same way that we did if you pass this prop do this otherwise do that you can also do something like this so imagine that you do something like if you get the margin and now you can do if you pass the margin use it otherwise fall back to Turin now you can go into our style button and we can pass the prop margin will be equal to margin and now you get margin here and now if you go to our app and you go to our button and you say margin equals for example this button you want it to be five RAM and now you go here the button the margin on this button now is five RAM as you can see here and if you don't pass it imagine oops imagine you remove it and pass it it just to REM so the possibilities are infinite here it's just JavaScript in the end so you can do pretty much whatever you want another thing you can do and this is super handy so for example let's critters a wrapper here so let's call it this no pagination rapper rapper and then this will be style dot deep for example now we're gonna do this play flex and with 100% and for now let's let's do justice so now imagine let's use it here and let's pass it the button let's call this I don't know h1 so now if we go back to our browser you can see we have our page one here let's just remove that's comment is out for now and let's also comment on this rapper let's just render our style button okay so now if you go back to our browser we have our rapper here that we just created with display flex and with 100% so now imagine if you have this come in hand in my movie library website so imagine if you are on page one you want to button saying page two to be on the right side right and if you are on the last page you want the button to be on the left side and if you are on the middle of one of the pages you want a button to be here and the other one to be here right so we can do something like this for example let's go to our app so you can use justify content property and let's get the probe that will pass here let's collect a page and now this is just JavaScript so we can do if else is here so we can do if page equals first to be on the right side so we can say return likes and else if our page is on the middle right for example elseif page equals middle we want so if it's the middle page we'll have two buttons and we want them to be on one on each side so let's say space between else we are on our last page right so else we can return flex start and now we can do some calculations here to see what page we are on and we can just pass page and now if we pass if it's the first page we can see the button is on the right so you have something like this page 2 and now if we are on the middle will render to two buttons right so for example page 2 and page 4 meaning you are on page 3 and we do middle and now you have one button on either size size and if you don't pass anything you render like one button meaning you are on the last page and let's call this for example five and the button will be on the left side so you can is like JavaScript inside these two pretty much calculate whatever you want you can also make overs quite easily so if you just come here and say and over and let's say this button on over the color will be white and the background color we'll be in the ballot well if you go to our browser you can just see one over changes you can also target classes insights inside the components so if you do the end percent it will refer to that elements itself if you do something like here some glass and now you do color blue it will try to find a child inside this element with this class so inside inside the style button we can do like P plus name equals some plus test and now you'll see it will be blue as you can see it's blue this is the same thing that's doing this so you can do and percent space and it will still look for children inside let's not delay this you can also do animation so when on CSS you do like keyframes you can do the same here so you have to import a new geological keyframes now you can say Const bathing equal keyframes and then you tag it and then you can say it 0% opacity will be zero and then at 100% opacity would be one and then here you can say animation will take two seconds and you refer to the fading and then you can give it its in if you go to our browser and refresh you can see it animates obviously a nice case would be to put this fade in on our style elements here and export it and then here we could import the faith in and we could use it here and we wouldn't need this here and then we will be able to reuse this you will just need to import it key frames here and let's put this with a capital letter and on our button you can import to fit in and refer to the fading and it should still work and you can see it is working so now imagine that we want this button to change when we over for example a rapper so let's create a rapper here be a styled div for example and let's give it with 100% and let's give it a back ah this is fine that's narrow wrap our button on this save now if we go back to our browser we see we have this tip here and let's give it a color okay also margin let's see margin-top ram for example okay now let's see that when we over this we want the color of our button to change we can do this in two ways we can do it here or in the button itself so here we can say something like author rapper right over and and now we can say for example the color will be red and I figure here you can see when we over the wrapper the color of the button will be red and we can also do it instead of think on the button we can do it on on the wrapper itself so we can do and over and on over of this element the style button styles here so color right now this will not work because we are using this before we define this so for this way to work we'll need to put this after and now if you go to our browser we can see it works it works the same way so this is how you can style another components when we over or when you click or something like that on another elements another thing you can do with style components it's to give them additional props what I mean by this is imagine you have a link and all your links on your page will always have the target --blank attribute the target --blank attribute means it will always open on a new tab so instead of for example normally we could this so constant equals style a and then we can say colors violets and you can say font-size one point six Vibram and now we would do something like this link the one link another link and you'll say for example a Trev H ref equals HTTP for example and target blank so now we have two links that will open up on a new page exactly like that but as you can see we are duplicating the target here so imagine that all the links on your app would always open on a new on a new tab we could do like something like this like style a dot attributes and now here it's a function that we get the props and then return an object and this is the short syntax to return on an arrow function you can just use parent is here and return an object and on this object you just pass your attributes so you can say that the target we'll be blank and that's it obviously this is an object so you have to use semicolons here but you can say the target will always be blank and now we don't need this year because we are already doing it up there so now basically we are saying okay all these links all component this component link will always have this attribute target blank and you can do are many attributes you want you can do for example an button that will always have the type be a button instead of a submit and if we go back to our app you can see it still opens on a new on a new tab another thing that's quite common for you to have on your apps it's for example a reset a CSS reset file so to do this install components you also can it's called global styles so you can inject some CSS file into your app so for example I'm on my let's go to our index file and here we can inject our global styles into our app so to do this let's go into for example source and let's create a new folder called a no theme for example and let's create a new file called global styles that's yes and here we will import something from style components and this is called create global style so now what you do is you can do Const for example global style equals create global style and now here you pass all your global stats so we can say that HTML the height will be a hundred percent you can say that all elements will have the padding of zero and margin of zero just a normal reset file what am I missing here oh this is not a comma now we can export default global style and now this is just what's wrong here oops and now this is just a normal stuff component so we can go into our index for example and we can import global Styles global style or Styles whatever you want from and we're going to theme global Styles and now we just mount it here besides our app so we can do something like this react fragment two months two components without the wrapper and this is a self-closing component so you can do like this and now we are mounting our global styles into our app and now if you go back to our app and if we expect our HTML you can see our styles are here so everything is a padding and the margin of zero and the HTML HTML I t's a hundred percent so you can do this to create like reset reset reset CSS Styles you can put your phones in here for example and that kind of stuff so now let's jump into one of my favorite features of style components and that's the theme provider so let's create a theme file in our theme folder let's create a new file called theme is and here we can have like an object with all our theme stuff so like to do for example export Const theme and this is an object and let's put for example our colors here and let's say that our main color is for example I don't know let's put something like I don't know I'm just gonna copy some colors here uhh this is just some random colors and this is handy because you can have like all your design basically here all the colors that you have within your app and now let's go to our index file let's import our theme from M / and let's make it a normal export a default export so let's export defaults like this our theme and now from style components we import something called the theme provider from well components and it's called the name provider and now as you might guess we wrap our app in a team provider so we can say simple sim provider and we put it inside and now we don't need the fragment anymore and now it just passes the theme so we say that the theme is equal to the theme and now inside every staff component that you write on the props you'll have the theme variable so if we go to for example our button and let's go to the color here the props I've props the theme not collars and then that meant for example now if we go to our app you can see that the buttons are using that color and to be more let's is for example on the background color instead of white let's just copy this over and let's use the light colors if you go you can see we are using the light color obviously we can distract the theme here and Jesus use it but this opens up so many possibilities so for example in our theme so let's go to our team we can create another object here called font weights or font sizes imagine you have like a guide from the designer oh this is the font sizes that we have on our app so you can say for example that a large font is three ram medium font is to ram a pea for example is 1 point 5 gram whatever you want and then you can just use them on your cell component so here you can just say that on the theme that fonts dot P on sizes now this will have that font size as you can see my favorite use case for this is for media queries so since you have access on all style components you can can do something like this so let's call it music varies and now you can say I don't like to call it like smallest or biggest cuz then imagine you have to introduce another media query and then you'll be like oh now what will I call it call it like smallest test so I just call it for example let's call this one below 7 6 8 for example and now you can say only screen right and max with 11:6 eight pixels and so on and so on and now we can go here and we can say for example at media and then we can get the theme here and on the theme that media queries dot b lo - seven six eight and now we can write our CSS here so we can say that the font size here will be 0.5 0.4 mm the color will be blue whatever you want and here we can do it like this obviously we need to since we have the - we have to access like this on this position and now if you're going to undefined why is it undefined I think I misspelled something media queries exactly so now if you go into our file and we shrink you can see that immediate weary kick kicks in so you can see here that on our button sighs smaller so this is an awesome use case for media queries for example and of course this is not the best naming because this makes you have to use this square brackets access you can do for example dot below up in 6/8 this will be like better naming and then here you can do below 768 would be better but you can see you can use this like for font weights for colors for font sizes for padding's for margins you can do for example spacers so spacers and then you can say that the large is too Ram for example I don't know just an example and then you can use these spacers on your app so then if you are designing is like oh you need to change these spacers now the large spacer will be 1.8 ram instead of 2 you can just come here and change it and it will change everywhere on your app so everywhere where you would do for example like margin - top and here you do like him in that spacers that large you don't need to touch any of these stuff you just go to your theme and you change you your your amount of spacers of spacing and it will just work I suggest you head over to their documentation page and their API reference you have a lot of stuff here they pretty much go over everything I just went over so that was my style components crash course I hope you liked it if you have any questions or suggestions for the next video please let me know in the comments if you liked the video please give it a like and subscribe and I'll see you on the next one

Channel: Fidalgo

Views: 65,276

Keywords: react, styled components, reactjs, js, javascript, css, html, sass, components, frontend, styling, css3, coding, programming, code, web, web development

Id: c5-Vex3ufFU

Length: 47min 43sec (2863 seconds)

Published: Mon Feb 17 2020