All language subtitles for 007 Styling Components In Next.js Projects_Downloadly.ir_en

How do we style our next application?

How do we style our components?

Generally that is totally up to you.

Next JS supports styled components.

You can use regular HTML code

with regular selectors, classes and so on,

and you can also use CSS Modules.

And the support for the latter is actually

already built into a next JS project.

Now that is what I'm going to use here,

so that we have scoped CSS styles,

scoped to specific components, at least if we want to.

But you can definitely also explore

other approaches for styling components.

Now you will notice that we have this styles folder here,

and in there we have a global CSS file.

Now here I set up some global CSS styles for you,

and as I just said,

you could, of course, add more classes here and then simply,

well, set up any styles you want here.

And you can also add more CSS files,

and for example, import them in this app JS file,

where we are also already importing globals CSS.

And we haven't really learned

what the role of this app JS file is.

But for the moment, you can keep in mind that here,

you could definitely import all your global CSS files.

But I want to be able to scope styles to components

and therefore I will use the built in CSS Module support.

Now, in case you don't know,

CSS Modules is all about setting up CSS code,

which is then bound to a single component,

so it does only affect that component

and no other component.

And that's a nice little feature

which ensures that our styles,

don't spill over to other components.

Now, therefore, I will create a separate CSS file

for the event-item component.

A CSS file where I will define the styles

for that component.

And I could create that CSS file in the styles folder,

and import it from there and that would work.

But I will create the next to the event-item.js file

so that component code and component styles,

are located in the same place.

That is a convention I like to follow.

It makes it easier to find the styles for a given component.

Therefore, here we add a new CSS file,

we could name it event-item.

But to unlock this CSS Module feature,

this file actually has to end with .module.css.

So event - item .module.CSS.

The part here event - item,

that's up to you, that does not matter.

But the ending .module.CSS, that is important.

Now with that we can save this file

and now in event-item.JS we can import this file.

We can import a CSS file into a JavaScript file,

and behind the scenes,

the next JS build process will take care about that.

It will basically extract the CSS code

change to selectors a little bit

to scope them to this component HTML code

and inject it into the running page.

We don't need to worry about that,

we just need to import our CSS file.

Our event - item .module.CSS file.

However, not just like this,

instead we import classes

or styles the name is up to you,

I'll go with classes from event-item .module.CSS.

This is required for using

this CSS Modules feature.

This classes thing here will be an object,

where all the CSS classes

we define in this CSS file

will be exposed under their class names

so that we can assign them to HTML elements.

This is required because the CSS class names

we will add in this CSS file,

will be transformed under the port by the build process

to make them unique for this component.

I also do talk about that

in my "React- The Complete Guide" course

in case you wanna dive a bit deeper.

Therefore, we import classes from this CSS file,

and then we can, for example, go to our list item here,

add the className property,

the className attribute,

and set this equal not to a string,

but instead to a dynamic value,

specifically to some key we get from this classes object.

And here that should be the item key.

Now, in these CSS file,

we can add a item class selector,

so that name here has to match

that name which we're accessing here.

And now we can to find the styles in here,

which will be applied to only this list item.

So even if we would use the item class here,

let's say in the event list component,

if I would add this kind of className here,

even then these style set up here,

would not affect this one here, this unordered list item.

Because with the CSS Marshalls feature,

the className we assign here in the CSS file

will be changed under.behind the scenes,

and it will no longer be item

once the application runs in the browser.

Therefore, to get this magically changed filename,

we get access to those transformed classNames

under this important classes object,

and we then access our originally assigned className

and get access to the actual transformed className

and assign this as a className to the list item then.

It sounds confusing?

Let me show it to you.

If we temporarily give this a color of red,

so if that's the style we assign,

and we then save all the files,

if I now reload and I then inspect this here,

you will see that this list item,

has a class of event - item underscore

item underscore underscore some unique hash.

And that's not the className we defined in the CSS file.

Instead, that is this transformed className

and the link is made through our assignment

of classes.item here.

So that's not working under dot,

and it allows us to scope our CSS styles

to a selected component.

Now, with that attached you find two CSS files,

which I prepared for you.

Because this course is no CSS course

I don't want to bore you with writing CSS code,

and therefore attached,

you'll find the event - item.module CSS file,

and the event - list.module CSS file.

And you should replace your event-item

dot module. CSS file with the attached one,

and also add the event list module CSS file

to this events folder in this component's folder.

Then back in the event item JS file,

we now need to assign more CSS classNames.

We should add classes not item on the list item,

so on the L.I element,

but then on this first div here,

you should also add a className of classes.content.

Then on the div In there,

add a className of classes.summary.

No className on the h two tab.

On this div here,

we add a className of class.date.

No className on the time element.

On this div here we add a className

of classes.address.

And then here on this div,

which holds the link,

we add a className of classes.actions.

So these are a couple of classNames we assign.

And now we also need to go to the event list component

and add some styles there.

For this in this event list component,

we first of all also need to import

classes from ./event-list.module.css.

And then on the unordered list item element,

we add the className prop,

and set this to classes.list.

Because in the CSS file which I provided to you,

there is a list class defined.

And then with that,

you should see that if you now reload,

you have something like this on the screen.

Still not the final look of everything,

but a good step closer.

Now as a next step,

let's work on this link and let's add a couple of icons.