Why you should look into these React component styling options!

hi when it comes to styling react applications or react components there you have a broad variety of options you can use inline styles which kind of to default and approach get started with when you learn react typically you can use normal CSS of course you can use packages like styled components and much much more in this video I'll have a look at some of the most popular options show you how to use them and why you might want to use them so that by the end of the video you will have no problem picking the right styling solution for your next project and maybe even learn about a new option which you didn't know before if you liked the video please press the like button it helps YouTube algorithm also subscribe of course if you want to see more tutorials and with that let's dive right in and see how we can style react components and therefore react apps so let's dive right into the different ways of styling react components let's start with the the simplest way the one you typically first work with when you get started with react and there will be inline Styles if we have a look at the App J's fall in our starting project and of course you'll find a link to that below the video then here you see on that Dave I set the style prop the style property of this diff component in the end of the stiff element and I set it to an object with some inline Styles now here this is a regular JavaScript object and therefore we are not allowed to use for example max width like that we would have to wrap this in two quotes to make it a valid JavaScript property name or use this camelcase notation and this is then translated to an inline style which is applied to the div which will add this with Max with margin border and so on now we can see that if we go to the running application we use the browser dev tools to select this div here and see it in the elements tab they offer you see here's our death and all these styles are added as inline styles now we don't just use that here on the div we also use it for example on the user summary and also on the but we can use it now at the moment we have a quite unstyled buttons let's see how we can write our own inline styles by adding some basic styling to the button not too complex just some basic styling I already prepared this style prop on the button element for you so we can just add something here to this object which we are outputting dynamically as a value for install prop and there of course you can Styles however you want but he all said font you inherit to use the same font family as the whole page does all set cursor to pointer to get this hand icon when I hover over it I will set the border to one pixel solid and then let's say we use blue here then a background of let's say blue then here also a color of white for the texts it may be all's a little bit of padding where I add one RAM top and bottom into Ram left and right maybe not five Ram top and bottom if we saved that we get this button here can click on it and it works now this is in line styling and action it has a couple of drawbacks though for one you might not like that all your style information is part of your JavaScript files now that's our personal thing that's something you have to decide whether you like that or not but it could be something you might not like now a bigger problem in my opinion is that we add this all as inline styles that means we don't really take advantage of the cascading nature of CSS here we're not utilizing it but you might want to utilize it maybe you have certain styles which you want to define on a top level and you want to have trickle down to lower levels for example let's say we want to style this paragraph in a certain way and we then want to have the same style in the paragraph in a different component with inline styles that's not really that easy to do we would have to export the style object in a file and then import it into different files this would also be a way of getting the styles out of a component by the way it would still be part of JavaScript though so here for example we could set the color to let's say hash AAA and if I do that you see the color changed here but not in user details there I have to do it as well it has a set the only way around this is really to export such an object maybe put it into a separate javascript file and then import it into the user details file and into the user summary file we can do that but we kind of work around something which normally would be built into CSS right so that could be an issue and an average do we have is pseudo selectors and pseudo elements what if I want to change the hover effect of the button or the focus effect in CSS we can do this with : focus or : hover but here with inline Styles we have no real way of doing that so that's also not ideal so this is why inline Styles might be good sometimes but not always you can't add them if you want to add some quick styling you only need it in that component and you don't need to work with pseudo elements or pseudo selectors otherwise might not be your first choice so let's have a look at another option we can use a very popular library for react which is called styled components style components is a library which allows you to create components with well with the syntax like this using a JavaScript feature called tact templates where you create components where you can encode styles into the component kind of including pseudo Styles and you then therefore are able to write more powerful CSS Styles you can also use real CSS instead of working with JavaScript properties to which you assign values so let's see how we can use that for dad of course here on the styled components page you find some basic instructions and it all starts with installing this package so I'll stop my development server here and run NPM install - - save styled components to see how we can then use that so let's wait for this installation to finish your installation finished for me so I'll bring up my development server again and now we can use step package and why don't we start in the App J's file for this div here by the way if you should be getting an error at this point run npm install at Babel slash runtime - - safe thereafter and chemstar should work again so now to use style components we first of all need to import styled from styled components so you use the default export of this package and store it in an object which you can name however you want here I'm naming its style now we can add a new component and if we only use it in this file we can create it in the same file and I will name it styled div you can of course name it however you want it should just start with a capital character so that you can use it as a component and here we use style dot and now here you got a bunch of methods actually which you can access which basically represent all the HTML elements you can use for example there you'll find a div method however you don't execute it as a method like this instead you use JavaScript feature which is called attacked template now if you've never seen this before and chances you haven't are quite high because you don't use that feature that often you use a tag template by adding back takes two backticks right after the function name or the method name and this looks really weird right in the end this year is a function call it's a method call where you could say you you pass a string though a special string a template literal to the function it's a bit more complex than that behind the scenes though javascript understands this syntax this is vanilla JavaScript it's not react or anything like that javascript understands this syntax parses this literal this template literal here and then passes different arguments into this div method basically the text you have in there but then also any interpolations you might have in there are all passed as separate arguments to the diff method and under the hood this dibbs method produces some JSX code which gives you a diff where the styles we're about right here will be added to that's how you can think about that well let's way we write some code here and then see the result since this is a template literal we can write multi-line code here this is allowed in JavaScript we can now grab this code here cat it and adhere like that however now we write normal CSS code here so we should remove these quotes max width becomes max - with remove the quotes here remove the quotes here remove the quotes here and also here and with that we get some normal CSS code now I'm bad here in this div template literal now that is already all we need here we can now replace the death down there with the style death because as I mentioned this div method will return a valid react component which automatically outputs anything you pass between the opening and closing tag as children off that component so it keeps whatever you pass between the opening and closing tag and outputs that between a priest style diff now when stat just one thing I just noticed we of course all have to fix is we have to replace commas here with semicolons to have proper CSS but now with that if we save that and we reload we have to save output as before but if we inspect us here in the elements tab it looks different you see we have no inline Styles there we have a normal death but it has a class and certainly a class name we haven't written because what styles components what this package does is it takes the CSS code you write here takes it out of JavaScript so to say and adds it into CSS code which then as you see if you inspect the head section isn't the end injected into the head section it creates a new class name automatically this strange weird-looking class name and all the signs this class name here to this death so that it takes this turns it into normal CSS which is defined in your page and assigns it with a CSS class back to your component and of course you can reuse this component now you can use it anywhere you want and it will always have the same CSS class which applies these styles and now of course we're more flexible than before let's have a look at the other places where we use inline Styles like here I want to have a paragraph which I can reuse which always sets the color the text color to this color so we could create a new component style paragraph and you can name it however you want and then there simply import styled from styled components you don't even need to import react from react because you're not going to write your own JSX code here and then simply create the styled paragraph name it however you want to name it and set this equal to style P the P method because we want to create a paragraph element now again we use this tacked template syntax by adding backticks right after the method name so not as an argument to the method but right after the method name you know in here we can define our style color like this and now we can export this style paragraph as a default here and use it anywhere we want for example in user summary instead of using the paragraph here I'll now simply import my style paragraph import styled paragraph of course you can name this differently here if you want to from this style paragraph file and then use style paragraph here on the opening and closing tag and whatever we pass in between will be preserved by the styled components package and will be output between the paragraph tag it creates here now I'm also using it in user details so here we can also import styled paragraph from style paragraph and replace our paragraphs here with that and also the one down there if you wanted to and oven-safe that again we have the same look as before but now reusing a component which utilizes styled components now we can see the full power if we move on to the button though there I also want to use some pseudo styles and with style components this is now really simple and easy to do all we have to do here is we have to import styled from styled components like this and then here instead of having our own component we can get rid of all of that and therefore we can get rid of the react import because we're not writing any J's X code anymore and instead Batna is equal to styled button with our backticks thereafter where we can now set up the style now for that I'll quickly move back so that I can save my style here and copy that and then move forward and now here first of all add the styling we set up earlier of course tweak it a little bit replace commas with semicolons remove quotes like this like that and in all the places where we use colons and quotes and when that we should be good and now at least have the same badness before by the way please note that it still has an on-click prop because styled components adds these button properties and events to the button it outputs there to be precise it uses the normal button under the hood so it doesn't need to add it it uses the normal button returns the normal button just with these Styles apply it and therefore we can do anything on our button component now which we could do an ANOVA button so when we use our button here we can listen to one click we could also set the type and so on if you wanted to this would all be possible because under the hood the normal button element is used here but now we can also add pseudo selectors simply by adding it like you would add a normal CSS property er : focus for example and now in here you can define your focus styles you could say that you don't want to have a outline there and on hover and on active you want to also have a certain style let's say the background color should change to light blue the text color should change to blue and the border color should also change to light blue this is how you can add pseudo selectors and if you save that your day for seve I hover over that and click on it we have our Styles in effect here and we also don't have the outline if I hover over it so this is how easy you can now add pseudo selectors and this works because as I mentioned this is extracted as a normal CSS is injected into the head and then just assigned a class which then is also assigned to the HTML element you got here's our injected style so this is what style components you now you can do a bit more with Sol components and also do some some nice things which you sometimes might need to do you can also set certain styles dynamically if you want to and all of that is documented in detail here in the official documentation so definitely check that out all the basics here really quick to read through not that many features but because it's a very simple but to the point live not because it's bad and I can only recommend that you have a look at that to find out how you can use dynamic styling here based on props your component might receive and so on so this is the styled components package and it definitely makes writing our code a bit easier or styling our components a bit easier and therefore this is what you might want to consider using instead of inline styles now using style components is absolutely fine one thing you'll have with that however is that you still have all your CSS code in your JavaScript files no matter if you outsource it into a separate JavaScript file or not it will be in the JavaScript file in the end now this might not matter to you or you might even prefer that I personally am NOT a fan of that the IDE support is not as good as it could be but you can probably make that work with some extensions but still I don't like this mixture of CSS and JavaScript this is only my personal preference though I also think however that when you're working in a bigger team and you have dedicated designers working on the CSS and our people working on the JavaScript it can make splitting work easier if you also split files and you work with normal CSS files so let's have a look at that as well and for that I'll go back to the button and comment out this button here and instead of when I go back to the button we originally used so we'll also comment out the import here and instead import react from react again because I'll go back to the roots I'll create my button component here simply by a returning button here like this outputting props children between the button tax and binding on click to props dot on click instead of forwarding all props which he'll of course could also do now this is a unstyled button if I save that we have the unstop button here it works but it does have no styles of course now I will add a button dot CSS file and it will take this CSS code here copy it into button CSS and use it there let me remove all these slashes and format this to proper CSS so we could select button like this move that code in there and then have button focus button hover and here button active and of course you could all use some pre processes here like sass but I'm going to go with vanilla CSS here to keep things simple so now I have my button CSS file here now one cool thing is in JavaScript here in a react project we can import that CSS file into the JavaScript file of course it will not really be imported here instead web pack the build tool which is used under the hood to build our files optimize them and bundle them together we'll see that we're importing CSS here and we'll then use that CSS code or I have a look at it and injected as CSS code into our page but it will inject exactly this CSS code not assign any strange classes to it not assign any classes to our elements here so if we save that we have the same look as before but now because in the head section if we check that we see that here effectively our Styles were injected that's what web pack did here now with dead I'm using regular CSS and that's generally good but we will have a problem of course if not all buttons should look like this right now this year is not scoped to this component I'm importing it here but it's added into our HTML file as normal CSS in the head section so any button on the page would have this look and it can prove this of course if we add a dummy button here on app tray s simply below the user summary don't click me because it won't do anything you see this button has the same look now sometimes you want this and then of course that's a fine way of doing it but if you kind of want to scope CSS to this component to make sure that only the button in this button component has this look and not any other button on the page well then you can use some vanilla CSS tricks like B e M which is a way of using class names which you guarantee are unique so that you don't repeat them and you only style what has this class name with this style so here we could change this to not use the button tag selector but instead use stop button here for example of course you can use any class than you want and also use the class names down there so dot button now in the button component I assigned this as a class name here and now only what's named button will get or only what has a class name of button will get these styles in there for the other button now has a different style so this is of course vanilla CSS the idea here justice that we guarantee that we don't reuse class names and for that we can use B e/m which stands for block element modifier and below the video you can learn more about it BM is just a convention of creating class names CSS class names and if you follow that convention you ensure that you never use the same class them twice in different parts of your app so they offered this is a great way of ensuring that you use unique class names to kind of scope styles to a certain component the styles are still added globally to the page but because we use a class name only what has this class name uses these styles now maybe you don't want to manually make sure you don't repeat yourself when it comes to CSS class names when using that BM convention you're relatively safe but of course still you could mess up things and use the same class name twice in different components in DIF years as files of different components and then things go wrong since all the styles are added globally your buttons everywhere in the page might look strange just because you messed up some CSS class name so manually creating these class names might be cumbersome might not be what you want and therefore you can use a feature called CSS modules this nhien is a build time transformation which is supported by projects created with create react app which this one is which allows you to import your CSS files into JavaScript but not like this but in a bit different way where the build tool web pack with the right plugins which are installed here will go over your CSS file tweak your class names to be guaranteed to be unique and go into your JSX code and everywhere where you use your class names the tweaked ones that week class names will be injected instead so that behind-the-scenes your class names are edited to be unique per component per CSS import so for that to use that you need to do two things for one you need to import something from the CSS file for example import classes or styles you can name it however you want I'll go with classes here and you don't import from button dot CSS brought from button dot module dot CSS you of course also need to rename the file to button dot module dot CSS now this is the indicator to create react app that you now want to use CSS modules now you get this classes import and now you use that here as your class name so instead of manually writing the class name here you use classes and now dot button for example this year after the dot is the class name you used and your CSS files if this is button with a lowercase B you use dot button here if it was button with a uppercase B you would use dot button with a uppercase B here so you use your CSS class name here of course this does not work in vanilla CSS and JavaScript but this build tool which is used behind the scenes does this transformation I just described creates unique class names here and then gives you these class names on this classes object so that you Indian are assigning them to your elements so if we now save that you will see that if this now reloads we still have to scope style only this button as the style this button does not but if we have a look at our styles that were injected we see the class name is now not just button as we wrote it here instead it's button underscore button underscore underscore some random identifiers some unique hash the CSS modules transformer which is used under the hood guarantees that this is always unique so that the styles we define in this CSS file which you import into this JavaScript file are unique are only applied to this javascript file and you see this strange class name of course therefore is also used on this button there if we expand all of that we have a look at this button in this div here we see it has this unique class name so that's the CSS modules transformer plugin which works under the hood and this now allows you to get the best of both worlds in my opinion you can write vanilla CSS code you don't have to worry about the class names and still you have to guarantee that for every component you have a unique styling which only applies to that component and does not spill over into our components if you want to have styles that do spill over just don't use this way of importing don't name your file start module dot CSS but use regular CSS files like the index CSS file it's imported here in index.js with the normal CSS import you saw before it does not use CSS modules because it's not named properly and therefore these styles here apply to the whole page and not just to one specific component and that's the last way of styling I want to show you now there are more ways of styling react for example there is the radium package which helps you style react applications and react there are many many other ways of styling if you search for a styling react or anything comparable you'll find tons of solutions these solutions here which I showed you are in my opinion the most important ones and I hope this video was helpful therefore so that's it you now should have a good overview of the different options were some of the different options you have when it comes to styling react components now as I mentioned there are more options which you of course can dive into but these word I would say the most popular options you find these days hopefully this video was helpful if you liked it please press the like button it helps to YouTube algorithm and of course subscribe to this channel to get more updates more videos and more tutorials so hopefully see you in future videos have a great day bye

Channel: Academind

Views: 64,702

Rating: 4.9740849 out of 5

Keywords: react, react.js, reactjs, react styling, react inline styles, styled components, react styled components, inline styles vs styled components, css modules, react css modules, bem, css bem, styled components vs css modules

Id: NMiEREulVLc

Length: 28min 35sec (1715 seconds)

Published: Wed Oct 09 2019