Coding

Why you should look into these React component styling options!

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