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

You may also like