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
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
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
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.
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.