All language subtitles for 019 Styling with CSS Modules_en

In the first demo application we built,

I gave you one CSS file that contained the styles

for all components.

That works for a small demo

but not necessarily for a bigger project.

There, you typically want to have different CSS files

for your different components

and hence, the CSS file which I provided to you here

is very slim.

Now, when it comes to styling the different components,

it would be even nicer if the styles

set up in a specific CSS file

would then be scoped to the component to which they belong.

So it would be nice if next to MainNavigation,

we could add let's say a MainNavigation.css file

we could add let's say a MainNavigation.css file

and then define the styles in that file

that belong to this MainNavigation.js file.

And they should not affect any other component.

That's something you'll often want,

because in bigger react projects,

you often work with hundreds or thousands of components

and you want to make sure

that your styles don't clash with each other.

Now the good thing is that Create React App,

this tool which we use for creating this project,

gives us a project that has a feature built in

that allows us to scope styles to components.

And that feature is called CSS modules.

It's a behind-the-scenes code transformation,

which will make sure that we can attach CSS files

to specific components.

For this, we first of all need to name our CSS files

in a certain way.

We need to make sure that they end with .module.css

So in this case,

the file is named MainNavigation.module.css

And then in MainNavigation.js,

we can import from this CSS file.

That certainly looks strange,

and it's not something

that would work in standard JavaScript

but since we have this extra built step here,

which parses and transforms our code

before it reaches the browser,

we can actually import from CSS.

And that is what we're already doing in index.js by the way.

We're importing a CSS file and behind the scenes,

that will tell the build process that this CSS code

should be injected into the loaded page as well.

We can do the same here in MainNavigation.js

but now to attach this styling

or this style file and its classes to this component,

we don't import just MainNavigation.module.css like this

we don't import just MainNavigation.module.css like this

but instead we import something, for example, classes,

this name is up to you, from this file.

Now I named it classes

because this something here, which we import,

will actually be a JavaScript object

where all the CSS classes you define in this CSS file

where all the CSS classes you define in this CSS file

will be properties of this object.

And you can then use them in your JSX code

to attach those classes to your elements

and behind the scenes everything will be transformed such

that those class names are made unique per component.

that those class names are made unique per component.

So let me give you an example.

We could go to the header JSX element here

and add the class name prop,

and set this not to a hard-coded string

but instead to a dynamic value with curly braces

and set it equal to classes.header

Now we can add a class named header

because here I am accessing header on classes

to this CSS file.

And any styles we define in here

would then only affect this component here.

So if I save this and I gave this a red color,

you see now that's colored red.

And if I had another header class in another component,

it would not be red because the styles are scoped

as I just explained.

Now the goal is here not to make this red

but instead I prepared some other styles for you,

which you'll find attached.

You'll find a MainNavigation.module.css file attached

and you can simply replace your MainNavigation.module

CSS file with mine.

Now in here, I defined a bunch of styles for you

and therefore, we now just have to wire them up

to the elements.

We already added the header class to the header.

On this div with the logo text,

you should add classes.logo and that's actually it already.

And with that, if you save this, let me zoom out a bit,

now we got this good looking navigation bar at the top here.

By the way, it's not optimized for mobile

since this is not really a CSS course

but I want to focus on react instead.

But now with that, we added this nice navigation bar

and we added it such that we have component specific styles,

which are also scoped to this component.