- 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