1 00:00:02,000 --> 00:00:05,000 How do we style our next application? 2 00:00:05,000 --> 00:00:07,000 How do we style our components? 3 00:00:07,000 --> 00:00:10,000 Generally that is totally up to you. 4 00:00:10,000 --> 00:00:13,000 Next JS supports styled components. 5 00:00:13,000 --> 00:00:16,000 You can use regular HTML code 6 00:00:16,000 --> 00:00:20,000 with regular selectors, classes and so on, 7 00:00:20,000 --> 00:00:24,000 and you can also use CSS Modules. 8 00:00:24,000 --> 00:00:26,000 And the support for the latter is actually 9 00:00:26,000 --> 00:00:30,000 already built into a next JS project. 10 00:00:30,000 --> 00:00:32,000 Now that is what I'm going to use here, 11 00:00:32,000 --> 00:00:35,000 so that we have scoped CSS styles, 12 00:00:35,000 --> 00:00:39,000 scoped to specific components, at least if we want to. 13 00:00:39,000 --> 00:00:43,000 But you can definitely also explore 14 00:00:43,000 --> 00:00:46,000 other approaches for styling components. 15 00:00:46,000 --> 00:00:49,000 Now you will notice that we have this styles folder here, 16 00:00:49,000 --> 00:00:52,000 and in there we have a global CSS file. 17 00:00:52,000 --> 00:00:56,000 Now here I set up some global CSS styles for you, 18 00:00:56,000 --> 00:00:58,000 and as I just said, 19 00:00:58,000 --> 00:01:03,000 you could, of course, add more classes here and then simply, 20 00:01:03,000 --> 00:01:05,000 well, set up any styles you want here. 21 00:01:05,000 --> 00:01:08,000 And you can also add more CSS files, 22 00:01:08,000 --> 00:01:12,000 and for example, import them in this app JS file, 23 00:01:12,000 --> 00:01:17,000 where we are also already importing globals CSS. 24 00:01:17,000 --> 00:01:18,000 And we haven't really learned 25 00:01:18,000 --> 00:01:21,000 what the role of this app JS file is. 26 00:01:21,000 --> 00:01:24,000 But for the moment, you can keep in mind that here, 27 00:01:24,000 --> 00:01:29,000 you could definitely import all your global CSS files. 28 00:01:30,000 --> 00:01:33,000 But I want to be able to scope styles to components 29 00:01:33,000 --> 00:01:37,000 and therefore I will use the built in CSS Module support. 30 00:01:37,000 --> 00:01:39,000 Now, in case you don't know, 31 00:01:39,000 --> 00:01:43,000 CSS Modules is all about setting up CSS code, 32 00:01:43,000 --> 00:01:46,000 which is then bound to a single component, 33 00:01:46,000 --> 00:01:49,000 so it does only affect that component 34 00:01:49,000 --> 00:01:51,000 and no other component. 35 00:01:51,000 --> 00:01:53,000 And that's a nice little feature 36 00:01:53,000 --> 00:01:55,000 which ensures that our styles, 37 00:01:55,000 --> 00:01:58,000 don't spill over to other components. 38 00:01:58,000 --> 00:02:02,000 Now, therefore, I will create a separate CSS file 39 00:02:02,000 --> 00:02:04,000 for the event-item component. 40 00:02:04,000 --> 00:02:07,000 A CSS file where I will define the styles 41 00:02:07,000 --> 00:02:08,000 for that component. 42 00:02:08,000 --> 00:02:12,000 And I could create that CSS file in the styles folder, 43 00:02:12,000 --> 00:02:15,000 and import it from there and that would work. 44 00:02:15,000 --> 00:02:19,000 But I will create the next to the event-item.js file 45 00:02:19,000 --> 00:02:23,000 so that component code and component styles, 46 00:02:23,000 --> 00:02:26,000 are located in the same place. 47 00:02:26,000 --> 00:02:29,000 That is a convention I like to follow. 48 00:02:29,000 --> 00:02:33,000 It makes it easier to find the styles for a given component. 49 00:02:33,000 --> 00:02:37,000 Therefore, here we add a new CSS file, 50 00:02:37,000 --> 00:02:39,000 we could name it event-item. 51 00:02:39,000 --> 00:02:43,000 But to unlock this CSS Module feature, 52 00:02:43,000 --> 00:02:48,000 this file actually has to end with .module.css. 53 00:02:49,000 --> 00:02:53,000 So event - item .module.CSS. 54 00:02:54,000 --> 00:02:56,000 The part here event - item, 55 00:02:56,000 --> 00:02:59,000 that's up to you, that does not matter. 56 00:02:59,000 --> 00:03:04,000 But the ending .module.CSS, that is important. 57 00:03:04,000 --> 00:03:06,000 Now with that we can save this file 58 00:03:06,000 --> 00:03:11,000 and now in event-item.JS we can import this file. 59 00:03:11,000 --> 00:03:15,000 We can import a CSS file into a JavaScript file, 60 00:03:15,000 --> 00:03:16,000 and behind the scenes, 61 00:03:16,000 --> 00:03:20,000 the next JS build process will take care about that. 62 00:03:20,000 --> 00:03:24,000 It will basically extract the CSS code 63 00:03:24,000 --> 00:03:25,000 change to selectors a little bit 64 00:03:25,000 --> 00:03:30,000 to scope them to this component HTML code 65 00:03:30,000 --> 00:03:33,000 and inject it into the running page. 66 00:03:33,000 --> 00:03:35,000 We don't need to worry about that, 67 00:03:35,000 --> 00:03:38,000 we just need to import our CSS file. 68 00:03:38,000 --> 00:03:41,000 Our event - item .module.CSS file. 69 00:03:41,000 --> 00:03:43,000 However, not just like this, 70 00:03:43,000 --> 00:03:46,000 instead we import classes 71 00:03:46,000 --> 00:03:50,000 or styles the name is up to you, 72 00:03:50,000 --> 00:03:55,000 I'll go with classes from event-item .module.CSS. 73 00:03:55,000 --> 00:03:57,000 This is required for using 74 00:03:57,000 --> 00:04:00,000 this CSS Modules feature. 75 00:04:00,000 --> 00:04:05,000 This classes thing here will be an object, 76 00:04:05,000 --> 00:04:07,000 where all the CSS classes 77 00:04:07,000 --> 00:04:10,000 we define in this CSS file 78 00:04:10,000 --> 00:04:13,000 will be exposed under their class names 79 00:04:13,000 --> 00:04:17,000 so that we can assign them to HTML elements. 80 00:04:17,000 --> 00:04:21,000 This is required because the CSS class names 81 00:04:21,000 --> 00:04:24,000 we will add in this CSS file, 82 00:04:24,000 --> 00:04:27,000 will be transformed under the port by the build process 83 00:04:27,000 --> 00:04:30,000 to make them unique for this component. 84 00:04:30,000 --> 00:04:32,000 I also do talk about that 85 00:04:32,000 --> 00:04:34,000 in my "React- The Complete Guide" course 86 00:04:34,000 --> 00:04:37,000 in case you wanna dive a bit deeper. 87 00:04:37,000 --> 00:04:41,000 Therefore, we import classes from this CSS file, 88 00:04:41,000 --> 00:04:46,000 and then we can, for example, go to our list item here, 89 00:04:46,000 --> 00:04:49,000 add the className property, 90 00:04:49,000 --> 00:04:51,000 the className attribute, 91 00:04:51,000 --> 00:04:55,000 and set this equal not to a string, 92 00:04:55,000 --> 00:04:57,000 but instead to a dynamic value, 93 00:04:58,000 --> 00:05:02,000 specifically to some key we get from this classes object. 94 00:05:02,000 --> 00:05:04,000 And here that should be the item key. 95 00:05:05,000 --> 00:05:07,000 Now, in these CSS file, 96 00:05:07,000 --> 00:05:10,000 we can add a item class selector, 97 00:05:10,000 --> 00:05:12,000 so that name here has to match 98 00:05:12,000 --> 00:05:15,000 that name which we're accessing here. 99 00:05:15,000 --> 00:05:18,000 And now we can to find the styles in here, 100 00:05:18,000 --> 00:05:21,000 which will be applied to only this list item. 101 00:05:21,000 --> 00:05:26,000 So even if we would use the item class here, 102 00:05:26,000 --> 00:05:29,000 let's say in the event list component, 103 00:05:30,000 --> 00:05:33,000 if I would add this kind of className here, 104 00:05:33,000 --> 00:05:36,000 even then these style set up here, 105 00:05:36,000 --> 00:05:41,000 would not affect this one here, this unordered list item. 106 00:05:41,000 --> 00:05:43,000 Because with the CSS Marshalls feature, 107 00:05:43,000 --> 00:05:47,000 the className we assign here in the CSS file 108 00:05:47,000 --> 00:05:50,000 will be changed under.behind the scenes, 109 00:05:50,000 --> 00:05:52,000 and it will no longer be item 110 00:05:52,000 --> 00:05:55,000 once the application runs in the browser. 111 00:05:55,000 --> 00:05:59,000 Therefore, to get this magically changed filename, 112 00:05:59,000 --> 00:06:02,000 we get access to those transformed classNames 113 00:06:02,000 --> 00:06:05,000 under this important classes object, 114 00:06:05,000 --> 00:06:09,000 and we then access our originally assigned className 115 00:06:09,000 --> 00:06:12,000 and get access to the actual transformed className 116 00:06:12,000 --> 00:06:15,000 and assign this as a className to the list item then. 117 00:06:15,000 --> 00:06:17,000 It sounds confusing? 118 00:06:17,000 --> 00:06:18,000 Let me show it to you. 119 00:06:18,000 --> 00:06:22,000 If we temporarily give this a color of red, 120 00:06:22,000 --> 00:06:24,000 so if that's the style we assign, 121 00:06:24,000 --> 00:06:27,000 and we then save all the files, 122 00:06:27,000 --> 00:06:31,000 if I now reload and I then inspect this here, 123 00:06:31,000 --> 00:06:33,000 you will see that this list item, 124 00:06:33,000 --> 00:06:35,000 has a class of event - item underscore 125 00:06:37,000 --> 00:06:40,000 item underscore underscore some unique hash. 126 00:06:40,000 --> 00:06:44,000 And that's not the className we defined in the CSS file. 127 00:06:44,000 --> 00:06:48,000 Instead, that is this transformed className 128 00:06:48,000 --> 00:06:51,000 and the link is made through our assignment 129 00:06:52,000 --> 00:06:54,000 of classes.item here. 130 00:06:55,000 --> 00:06:56,000 So that's not working under dot, 131 00:06:56,000 --> 00:07:00,000 and it allows us to scope our CSS styles 132 00:07:00,000 --> 00:07:02,000 to a selected component. 133 00:07:02,000 --> 00:07:06,000 Now, with that attached you find two CSS files, 134 00:07:06,000 --> 00:07:08,000 which I prepared for you. 135 00:07:08,000 --> 00:07:11,000 Because this course is no CSS course 136 00:07:11,000 --> 00:07:14,000 I don't want to bore you with writing CSS code, 137 00:07:14,000 --> 00:07:16,000 and therefore attached, 138 00:07:16,000 --> 00:07:20,000 you'll find the event - item.module CSS file, 139 00:07:20,000 --> 00:07:24,000 and the event - list.module CSS file. 140 00:07:24,000 --> 00:07:27,000 And you should replace your event-item 141 00:07:27,000 --> 00:07:30,000 dot module. CSS file with the attached one, 142 00:07:30,000 --> 00:07:34,000 and also add the event list module CSS file 143 00:07:34,000 --> 00:07:37,000 to this events folder in this component's folder. 144 00:07:38,000 --> 00:07:41,000 Then back in the event item JS file, 145 00:07:41,000 --> 00:07:45,000 we now need to assign more CSS classNames. 146 00:07:45,000 --> 00:07:49,000 We should add classes not item on the list item, 147 00:07:49,000 --> 00:07:51,000 so on the L.I element, 148 00:07:51,000 --> 00:07:53,000 but then on this first div here, 149 00:07:53,000 --> 00:07:58,000 you should also add a className of classes.content. 150 00:07:58,000 --> 00:08:01,000 Then on the div In there, 151 00:08:01,000 --> 00:08:04,000 add a className of classes.summary. 152 00:08:05,000 --> 00:08:08,000 No className on the h two tab. 153 00:08:08,000 --> 00:08:10,000 On this div here, 154 00:08:10,000 --> 00:08:13,000 we add a className of class.date. 155 00:08:14,000 --> 00:08:17,000 No className on the time element. 156 00:08:17,000 --> 00:08:20,000 On this div here we add a className 157 00:08:20,000 --> 00:08:23,000 of classes.address. 158 00:08:24,000 --> 00:08:26,000 And then here on this div, 159 00:08:26,000 --> 00:08:28,000 which holds the link, 160 00:08:29,000 --> 00:08:31,000 we add a className of classes.actions. 161 00:08:32,000 --> 00:08:35,000 So these are a couple of classNames we assign. 162 00:08:35,000 --> 00:08:38,000 And now we also need to go to the event list component 163 00:08:40,000 --> 00:08:40,000 and add some styles there. 164 00:08:42,000 --> 00:08:44,000 For this in this event list component, 165 00:08:44,000 --> 00:08:46,000 we first of all also need to import 166 00:08:46,000 --> 00:08:51,000 classes from ./event-list.module.css. 167 00:08:53,000 --> 00:08:56,000 And then on the unordered list item element, 168 00:08:56,000 --> 00:08:58,000 we add the className prop, 169 00:08:58,000 --> 00:09:00,000 and set this to classes.list. 170 00:09:00,000 --> 00:09:05,000 Because in the CSS file which I provided to you, 171 00:09:05,000 --> 00:09:07,000 there is a list class defined. 172 00:09:07,000 --> 00:09:08,000 And then with that, 173 00:09:09,000 --> 00:09:13,000 you should see that if you now reload, 174 00:09:13,000 --> 00:09:15,000 you have something like this on the screen. 175 00:09:15,000 --> 00:09:18,000 Still not the final look of everything, 176 00:09:18,000 --> 00:09:21,000 but a good step closer. 177 00:09:21,000 --> 00:09:22,000 Now as a next step, 178 00:09:22,000 --> 00:09:26,000 let's work on this link and let's add a couple of icons.