Styled Components Crash Course & Project

[Music] hey what's going on guys in this video we're going to get into something that i've been wanting to get into for a while now and that's styled components within react so style components allows us to write css in javascript in a very elegant and reusable way and i do realize that some of you might not like this approach i mean if you ask me there's really no wrong way to write css in react then there's a lot of different ways and it's pretty much preference i think if you want to use one global style sheet that's fine but if you really want to encapsulate your components and and have everything in one place it's definitely something to look at and style components is extremely popular so you're probably going to run into them at some point now the way that i'm going to format this course is the first 20 minutes or so is going to be the fundamentals showing you how to create a style component we're going to get into nesting and props and themes and global styles and then we're going to continue on after that to build a project and we're basically going to build this right here this little huddle landing page and this is from the front end mentor challenge website uh it's not exact but it's it's close enough and i thought it was a cool little project to just just dive into react and style components it has different color buttons so we can use props and media queries and things like that but yeah so first 15 to 20 minutes we'll be just kind of going over the basics and then from there we'll continue on to build this project if you want to follow along all right so let's get into it alright guys so i have a new react app up and running i just used create react app and what i want to do is first kind of go over the fundamentals of style components i'll show you how to create a component we'll talk about props and global styles and themes and stuff and then we're going to kind of move on to finish the project which is going to be something like this this huddle um landing page here all right so i just have like i said a clean install of react and what i'm going to do is open up a new tab because i have the server running in that one and i'm going to install style components and you can install with npm or yarn so it's going to be styled dash components okay so now that that's installed i'm going to go into the source folder and just delete a couple things here the logo we don't need that and then there's two css files by default when you use create react app there's app css and index css and you can keep these if you want you can still use global style sheets if you're using style components but i'm going to show you how to create global styles using style components where you don't have to actually have css files so we're going to delete these and this is going to break because in the index.js it's trying to import index css so we just want to get rid of that line and we also want to go in our app.js we're going to get rid of both imports here and then let's get rid of everything that's within the the initial div and for now we'll just put in h1 and we'll just do hello world all right now in terms of styling a common thing you would do is add classes right you would have a class or class name since we're using jsx and we might want a container for instance that brings everything into the middle to a certain width and then you would have the container class in a css file somewhere and you would style it there but with style components instead of doing this where we have an element with a class name we would have an actual component a style component called container and we could wrap this like that now if i save this this is going to break obviously because it doesn't know what container is so as far as creating your style components what i do is in my source folder as most people do i have a components folder and that's where all my react components go but then i'd also have an additional folder in there called styled or styles and inside styles that that will be strictly style components so let's create a new file in there called container and i'm actually going to call it container dot styled this isn't a requirement this is just a common convention you could do style or styled and then dot js because it is a javascript file it's not a css file now in this container dot styled we want to first import what's called styled from style components and then we would create our component in this case container and we would set that to styled dot and then whatever element we want this to be because we used a container tag but this doesn't specify a div or a span or h1 whatever we might want and that's what we do here is i want this to be a div so i'm going to put div and then you would have two back ticks okay now inside these back ticks is where you would have your css so i'm going to go ahead and add a width of we'll do 1000 we'll do a max let's do a max width of 100 and padding 20 pixels on the left and right and then margin we want this move to the middle so we'll do zero auto and what's nice about this is it's just regular css in here unlike where we do css and javascript without style components in react you would do like you know background color with camel case like that and you have to use strings and stuff and it can be a little bit weird so with style components everything that's in here is just pure css now we do want to make sure that we export this so we can bring it in to files that we need it where we're going to use it and that's it for the container so let's go back to app.js and let's go up here and let's import and it's not a default export so we want to use curly braces and container and that's going to be from let's see we want to go dot slash components slash styles slash container dot styled so now if i save that it should show up and it should have a container you can see it's it's put in the middle there and it should also be a div so if i were to look in my elements tab here you'll see the the element around the h1 is a div if i were to change this right here to let's say a span then that would change that to a span all right and this could be anything it could be a div an image a link or anything at all so that's it for the container we can close that up and let's create our first regular react component so in components i'll have a file called header.js okay this isn't in the styles folder it's it's just in the components folder and i'll go ahead and use my react snippets extension just to create a simple functional component and for now let's uh let's take this div make this a header and we'll just put an h1 in here and say actual we'll say hubble and then i just want to bring this into app.js so let's go up top here and import header from components header and i want to put this above the container so i need i need something to wrap everything here in the return so i'm just going to use a fragment so we'll put a fragment there end it there and then let's put our header component all right so now we should see hubble over here so now this header js i want this to have its own style components typically you'll see your react components and then you'll have a corresponding style component for it so in styles now i'm going to create a file called header dot styled dot js and then let's go ahead and import styled and let's export and i don't want to just call it header because that's the name of the react component so typically what i'll do is call it styled and then whatever the name of the component and i forgot const okay so we have styled header and we want to set that to style dot and then whatever we want the tag to be in this case is going to be header then we have our backtext and then we'll have a background color and let's see i forget the the actual background color here see if i can find it okay so it's going to be a hexadecimal value of eb f b f f which is a light blue and then i'm going to have padding and for the padding let's do 0 40 pixels i believe i believe that was oh no we have 40 on the top and bottom so 40 zero all right now this styled header i want to bring this into my regular header component so let's go up here and let's import and we want to use curly braces here and it's going to be styled header and then instead of just a regular html5 header tag here we're going to use our style component so if i save that now you can see we have that light blue background and we also have the padding now you can also nest so if you've ever worked with sas or less or any css pre-compiler then you've probably nested styles before so in this header we have an h1 if we want to style that we can simply go within here and say h1 and let's say color red i'm not going to keep this but we'll just say color red and even though these are both h1s only this one is red okay because it's nested in here and you can also put in states like you wouldn't typically do this with a header you do this with a link or a button but you could do ampersand which just basically represents that element and then we could do like this hover and let's do [Music] background color i don't know black i'm not going to leave this and now you'll see if i hover over it it turns black all right so you can do hover you can do active focus you just want to use the ampersand as kind of a placeholder but i'm not going to keep these i just wanted to go over nesting real quick now another really cool thing about style components is you can pass in props so if we go to our styled header where we embedded it here let's say i want to pass in bg as a prop as a background color and i'm going to take actually i'll just i'll just put red for now just so you can see that it works so we'll set bg to red now the way that we access this prop within the style component is wherever we want to use it in this case is going to be right here we would put in our money sign and curly braces because remember this these back ticks this is basically like a template uh template literal so in here we would have a function so we'll have an arrow function that takes in props and then we should be able to access any props that are on that component such as bg if i save that now you'll see it turns to red okay i'm actually going to change this red no you know what i'll leave it for now because we're actually going to use a theme color for this but you might want to take this a step further and destructure props like you would with a regular react component and just take out bg and then you don't have to use props dot you can just use bg and that works the same way so now i want to talk about themes so there might be values that you want to have in kind of a global space where you can easily change them things like the header color the body the footer color even button colors and things like that you might want to have in a theme so to create a theme we can go to app.js and we're going to bring in the theme provider so let's import and we want to import theme provider from style components and then what we do with that is we wrap it around everything down here so theme provider and we want to just wrap this around everything and then the steam provider takes in a theme prop okay so we're gonna have an object called theme so let's go up here above the funk the component function and let's say const theme and you can put this in a different file too especially if it's gonna if it has a lot of different values and then we could even put a uh another object in here called colors you could put something in the top level like you could do header and then the color and then you have access to that with theme dot header however i'm putting this extra object in here so it's going to be theme dot colors dot header when we access it and then for the color i'm going to use i don't have it in my clipboard anymore let me just grab that light blue color all right so we're going to put that in there and then i'm also going to put the body color in here which is going to be white and then we'll also do the footer as well and that's going to be 0 zero three three three three okay so now if you want to change these color the header or body or footer you can easily have it all accessible here now back in header.styled instead of having a prop being passed directly in we can now access anything that we want from the theme through props so we're going to grab that and then just say theme dot colors dot and then header so if i save that we should get that blue that light blue back all right and then here we don't need to actually pass in this and by the way you can pass in as much as you want here i could do color for the text or size or whatever you can pass in whatever you like all right so that's props theme now as far as global styles where you want to put like your body styling and any reset stuff like that like i said you could have a css file but you can also do it with style components i'm going to actually create another file called global.js inside of my styles folder and in order to use global styles we're going to import something called create global style from style components and then we just create a variable here and we'll call this global styles uh yeah we'll call it global styles and set that to create global style with some backticks and then this is basically all of your global styling whatever you know your body and all that so i'm just going to grab real quick some of the global stylings here which isn't much i'm importing a font you can import fonts here or you can do it through your index html or i mean there's many ways you can do it i just have my box sizing set to border box my body styling my paragraphs and my image okay now i didn't export this you can export it here or you can go down here and export as default which is what i'm going to do so we're going to export default global styles okay and that's not going to take effect yet what we want to do is bring it into our app.js so let's say import global styles and then we can just simply go in here we'll go right above the header and just add in global styles just like that and now you can see the fonts change the margins gone et cetera all right now as far as the body color i want to use this from the theme this theme.colors.body so i can access that in the global file as well so instead of just hard coding white let's go ahead and let's put a function here and let's grab the theme and then we want to set that to theme dot colors dot uh body okay so now if i were to go in my app.js and change the body color to black there we go so it's it's it's a cool way to make light and dark themes you can even create a theme switcher uh if you want to do that now i'd say that's pretty much all the fundamentals you have you know how to create style components how to nest how to have props global styling themes so the rest of the this video is going to be is basically building the project we want to build this little landing page using style components so you can stop the video now that you know kind of the basics or you can continue on and build the project so let's go back to our header js because we have some more content to put in here now i do want to have the container inside of the header so i'm actually going to bring that in so let's import the container and then let's use that here and we'll move this h actually we don't even need the h1 actually let's just keep it so we can see all right so the container is working now as far as what i want in this container we want to have the the nav the navigation which is basically just i'm going to make this a little bigger navigation is just the logo in the button really so that's going to be the nav and then we're going to use flexbox to align them same thing with this stuff down here now as far as all the images i'm gonna put those inside the public folder over here so they're just basically static images and you can get these from the github repo in the description it's a folder called images and i'm also replacing the favicon okay so you can see these are the images they're all svgs and now if we go over here you can see the favicon has changed now let's see we have our container the nav i'm gonna make into its own style component so let's do nav and then inside nav we'll have our logo as a style component and our logo is going to be it's an image so it's going to take in a source and that's going to be dot slash images slash logo dot and we'll do alt and then under the logo we're going to have a button which is also going to be a style component and we'll say try it free all right now if i save this we're going to get an error because these three components don't exist and there's so many different ways to do this so don't think that the way that i do things is how you have to do it since the nav and the logo are only used in the header component i'm going to put the style components in the header file the button however will be used in other places so that will have its own file so let's start with creating the nav and like i said it's going to go in this header dot style because you can put more than one component in here as long as you're exporting each one so let's go export const nav set that to styled and of course we want that to be a nav tag and then for the css i'm just going to let me see if i can find that all right so let me paste this in here so we're just displaying flex and we're setting it so the logo is on one side and the buttons on the other and then as far as the logo goes let's say explore cons logo set that to styled and this is going to be an image so style.img and backticks and i'm just going to leave that blank for now okay so now for the button that's going to be its own file so inside component styles let's create a new file called button.styled.js and we want to import styled and let's export const button and this is going to be style dot and we want this to be a button tag okay and then let me grab the css for that okay so just some basic styling i do want to pass in a background color and the text color as a prop so what we'll do is we'll set background color and then we're going to add some javascript in here it's going to be a function that takes in props i'm going to destructure from that bg and let's make this an arrow function and we're going to set that to let's do yeah we'll just say bg and we can even do or white actually this has to be a string so we can do that as well and then let's just copy that down change this one to triple three and this is going to be color okay so it's going to be a prop called color and set that to color all right and then let's uh let's also add a hover effect so remember just like i showed you before with the header we can use ampersand and then whatever state we want and i'm just going to set the opacity to 0.9 and i'm going to set transform i'm just going to scale it down a little so we'll set scale and inside here let's do 0.98 okay so that should do it for the button so we'll close that up we can close the header styles up and let's bring those uh three style components into our header component now remember the nav and logo are both in the header styled so we'll bring those in and then the button has its own file so button button and we'll save and there we go and you can see the hover effect here it scales down now i do want this let's see actually that yeah we want that to stay white so we'll leave it like that when we get to buttons down here we'll add the background color but yeah let's move on to the next part of the header which is going to be this part we have an image on the right we have some content on the left so let's see um since since we're using the same type of flex flex box in in different places i think we're using the same in the footer i'm going to create a flex component that just aligns things side by side and you don't have to do this i just think it's it's convenient to have these utility classes like container and flex so i'm going to create a new file under component styles called flex dot style dot js and same thing we've been doing let's import styled export const and we're going to call this flex and that's going to be set to styled and it's going to be a div all right so let me just grab those okay so for this i'm just displaying flex align item center and then any direct div or direct ul we're going to set flex to one just to set the um just to set the rows i'm sorry the columns so let's save that and then we'll go into back into header and let's bring flex in i'm just going to copy this down and this is going to be styles dot flex flex okay so now you can use this whenever you just want to align something side by side so under the let's see we're going to stay within the container but go under the nav and then have our flex and then in here i'm going to have some elements so we'll have a div let's have an h1 and i'm just going to paste in the actual text and then we can make this a little wider now all right so that's going to be our first flex item actually this is going to have a paragraph and a button as well and you could technically make all of these a style component if you don't want to have any html tags at all but i don't really see the point in that i mean you can style these from within header if you want you could say header h1 and it would style this so there's really no reason to do that my main goal with style components is to not use classes if these elements don't don't have any classes or don't need any special classes then i assume just leave them but i mean everyone does things differently so let's see we want to have a button here and the button remember we can take in a prop so let's say bg and we're going to set that to a hexadecimal value ff0099 and then we're going to pass in a color of white and this button is going to say get started for free all right so that's the first flex item this div with all this this stuff in it and then we're gonna have an image next to it so the image i do want to add some styling to i believe yeah so let's let's actually create a custom image component so i'm going to use capital i here and then source we're going to set the source to dot slash images slash and it's illustration dash mockups dot svg all right so that should give us an error because that image isn't created now since i'm only using image i'm only using this inside the header again i'm going to put this in the header dot styled so let's go down here and export const image style dot and that's going to be an image tag and then let's see for this image i'm going to set the width to 375 and i'm going to set a margin dash left just to push it over a little bit i'm going to set that to 40 pixels so let's save that and then let's make sure we bring it in to header remember it's it's in the header style component so we can bring it in here and there we go so i think that looks pretty good and notice our button it took in the prop to make it pink and make the color white and then we have our image so yeah i think that looks pretty good now if we want to make this responsive you can add media queries really easily so let's start with i guess we'll start with the nav so this i want these to be on top of each other so in the styling for the nav what we can do is just go right inside here and put our media so let's say whoops let's say media and we're going to do let's do max with now we could just set this here to 768 that's what i want to use however i think this is a good um element or not element but good value to put in the theme so under theme here let's go outside of colors and we can say like mobile we could make this an object and have multiple values but this is the only media query i'm using or the only size breakpoint i'm using so i'm just going to set it here to 768 pixels so that way if you wanted to change the size of this breakpoint you could just change it from here rather than going in all the you know all the separate media queries so now we can get that just like we do any other props let's destructure this take our theme and set this to theme dot mobile okay so now we have our media query for 768 and under and for the nav let's change the flex direction because it's a row initially but let's make it column which will stack so if i save that now you can see this is stacked it's flex direction column now the logo i actually want to add some margin bottom to when it's this size so what i'll do is take this media query i'm going to go in here paste that in and let's change let's get rid of that and let's do margin bottom and set that to 40 pixels all right so i think that looks pretty good now for let's see this part here let's copy one of these and the image actually flex let's do that first oh yeah we have our own file for flex so for this paste this right under here and in fact we're going to do flex direction column but i also want to text align everything oops text align everything to the center all right and then we'll just add some margin on the image some margin top so let's go back to our header styles and we'll go ahead and paste that in there and let's change this to margin let's do 40 pixels zero 30 pixels all right so i think that looks pretty good all right so let's continue on here so the next content that we have are these these cards or whatever you want to call these things and as far as the content i'm actually gonna get i have a a javascript object with all this content in it because we're just gonna basically create a loop or map through the content and create a card for each one so i'm going to grab that and bring it over and put it in the source folder and and you can grab it from from the repository it's just called content.js and just looks like this it's an array with and i each one has an id a title body and then an image name okay so that's the content we're going to use now we can kind of we can close up all this stuff for now i'm going to leave app.js open because what we want to do is is map through that content and output a card for each one so let's bring in into app.js let's import content and that's going to be from dot slash content and let's see we're going to go in the container we no longer need this h1 and let's take that content let's map through it to create a list and here i'm going to go ahead and put another set of parentheses and we'll have item and the index and then here for each one we want to output a card component which we haven't created yet so actually for now let's just do we'll just do a paragraph just to make sure that we can read the content so we should be able to do from here like item dot title so if i save that and we go back we should see each title so now let's create a card component so inside components card dot js and we're gonna just create a functional component we will have a styled card that we'll bring in after but i just want to do the content first so as far as props it's going to take in item which is an object that i'm going to destructure further so we can get from that the id the title the body and then the image so we should have access to those values and then down here ultimately this is going to be the styled card but i just want to get the content in here first so the style card will be display flex so we'll have a div here that will be the first flex item and then a div here that'll be the second and in this first one we'll have an h2 with the title and in the second this will be a paragraph with the body and then down here in this div we'll have the image and this is going to be let's see this is going to be dynamic because remember we have the name of the image coming in as a prop coming from the javascript file with the object so this is actually going to be curly braces and then backticks and then we can do dot slash images slash and then whatever the image is so we'll go like that all right so we'll save that let's go back to app.js and let's bring our card in i'm just going to copy header card and then down here instead of a paragraph let's get rid of that let's put in our card component which is going to take in a key since this is a list that'll just be index and then it's going to take an item which is going to be the specific item in that iteration so save and there we go so it's not styled yet but you can see the content is there now as far as the style let's go into component component styles and let's create a new file called card dot styled dot js and we want to import from here styled and then let's export const styled card set that to styled and then this is going to be a div and i'm just going to paste some styling in here just we're just using flexbox we're adding a border radius a box shadow margin and padding we have some other stuff to add but i'm just going to first bring this into card so back in card js let's import styled card and let's change this top div here to styled style card okay so now if we save that it should look like this now the image i want i actually want the image to be a little smaller so i'm going to set that to 80 percent and remember we can we can nest in here right so we can do image and let's set width to 80 percent oops not auto 80 and um i want to set the immediate div to flex 1 to set the alignment so what we can do is say the immediate div from this element i'm going to set flex to 1 and then i also want to make it responsive because right now if we make it smaller it's still two columns so what we'll do is we'll add media hawaii keeps doing that media and then let's set max with and remember we have in our theme we have that mobile value so we'll go ahead and destructure theme and set that to theme dot mobile and then let's see we want to set the flex flex direction to column so that way they're on top of each other they're stacked on small screens now the second one we want the image to be on this side so i mean there's a few ways that we can do this i mean to set it to the other side we can just set a value in style card so we can set flex dash direction and instead of row which is the default we could do row dash reverse and that will reverse them and put the image on the other side if i could spell reverse right but now you'll see it does it to all of them so we need what we want to do is pass a prop into our styled card to let it know the layout and it's going to be based on every even one i want every even card to have a reverse layout so let's see we'll go back to our card component and we'll pass in a prop of layout to our styled card and we're going to set this to a condition we'll say we're id and then we're going to use the modulus operator and then 2 if that is equal to 0 so this expression is basically saying if id is even then we can use double ampersand which is just then it's kind of a shorthand for a ternary without an else so if that's true then we want to pass in row dash reverse as the layout prop so now if we save that we go back to card styled where i just have row reverse hard coded instead of that let's use the layout prop so we'll go ahead and destructure from that the layout and we'll go ahead and say this is going to be whatever the layout is or it'll just be row so if row reverse is passed in that's what it will be else it'll be row so now if we go back you can see only the second one has the image on the left and if we added a fourth that would have on the left too so it's going to be every other one all right so now the last part of this is going to be the footer so we can close up these cards and in components let's create a new file called footer.js okay now there's a couple style components that i'm going to be using in the footer i'm going to be using container and flex we're also going to create a custom styled footer but let's let's go ahead and import the things that we already have such as container and flex all right and then let's see we'll go down here we'll keep this as a div for now but ultimately that's going to be a styled footer so let's add our container first and then we're going to have an image this is going to be the white logo so we're going to set that to images slash logo underscore white dot svg and then let's see then we're going to use our flex and this is going to be the unordered list and the social icon so i'm actually going to paste in the uls let's see so basically we just have this ul this one and this one all within the flex and then we're also going to have our social icons but i won't do that just yet let me just put a comment here so this is going to be social icons and then outside of the flex we're going to have just a paragraph with with the copyright so we'll do copy 2021 huddle all rights reserved all right so let's save that and now let's bring the footer into app.js let's see i'll just copy the header down footer footer and then we're going to put this down at the bottom we're going to go under the container and put footer oops all right so that should show up and it it's pretty ugly so we're gonna go ahead and style that um the container is there the flex is working you can see that they're aligned side by side but we have some other work to do in terms of styling so let's create a new style component and we're going to call this footer.styled.js let's import styled export we're going to call this styled footer oh i keep forgetting const styled and it's going to be a footer tag all right so let me see what we got for styles here all right so you know what i'm just going to grab all of this now the background color remember we have that in our theme so i'm just grabbing the props here and using theme.colors.footer and then taking the bullet points off the ul's adding some margin bottom to the lis some alignment to the paragraphs and then on smaller screens taking away padding and aligning center and so on so let's save that and then in our footer we want to bring in our styled footer so import styled footer and we're going to replace this div right here with styled footer okay so there we go that looks pretty good now the last thing is the social icons so we're actually going to put that in a separate component so let's create social icons.js now i'm actually going to use a package called react icons which will allow you to use font awesome icons as other libraries as well but whenever i use font austin with react i use this so i'm going to do npm install react dash icons all right and then let's go up here to the top and we want to import some icons from uh react icon slash fa so that's from font awesome and the icons that i want to bring in are going to be f a twitter fa facebook and fa linkedin okay and then let's see we're going to put inside this div which we're also going to have we're going to have our own style component for this component but for now let's just add the content so in here let's put in a tag and i'm just going to put this is just going to go to twitter and in here we're going to do fa twitter and we'll just copy this down so this one will be facebook this one will be linkedin okay so we'll save that let's bring it into footer put this at the top i like to have this styled at the bottom so let's import social icons and put that right here okay and if we take a look it looks really ugly so we want to create one more style component called social icons.style.js and we'll call it styled social icons and we want to set this what is this a div yeah okay so as far as the styles as the core styles we're just aligning them but the the link we want to style as well remember we can use nesting here so the link is going to have all these styles so let's save that and go back to social icons let's bring in styled social icons and let's replace this div with styled social icons and there we go although it does have a oh wait a minute what did i do here these should all be wrapped in allies like that and then in our social icon style let's just add uh let's we'll say list style none all right so that should do it and everything should be stacked on small screens cool so i know that this was kind of a long video but i wanted to just just do some kind of project i know there's a lot of style component crash courses out there so i wanted to do that and focus on the fundamentals and show you how to use it but also do some kind of little project now as far as if you want to use style components or not i i mean i think there's an advantage to knowing exactly where all your styles are and having everything encapsulated so you know if you have a header component you also have a header dot styled component if you have a card you have card dot style and so on and then in addition to that you can have utility components like flex and container and things you can use in some in multiple components so i mean it's really up to you i like it i if i'm to do a pro i don't use it in a lot of courses because i don't want to add an extra technology on to what i'm already teaching however if i do projects on my own style components is usually what i would reach for if i'm using react or next but again it's it's all preference the point of this video is not to sway you into using something but just to show you how to use it and how to get started so that's it guys thanks for watching and i'll see you next time

Channel: Traversy Media

Views: 4,088

Rating: 4.983707 out of 5

Keywords: styled components, styled-components, react styled components, react css, react

Id: 02zO0hZmwnw

Length: 48min 23sec (2903 seconds)

Published: Tue Sep 21 2021