In the previous video
we added a CSS file to our app,
containing global styles,
that apply to all our pages.
Now, keeping all the styles
in a global CSS file
doesn't work so well
when our app becomes larger,
and we add many different pages
and components.
For example, here we added some rules
for the "ul" and "li" elements
used in the navigation bar.
But as they are,
these rules really apply
any "ul" and "li" elements,
anywhere in our application.
What happens if we have
a list of items somewhere else,
like in our HomePage?
Let's add a list here for example,
with some test items
saying "One", "Two",
and "Three".
You can see that in the page
these items are displayed
all in a single line,
because it's applying the same rules
we defined in our global CSS file,
written for the navigation bar.
But if we have a list
in the main section of the page
we probably want that list
to be displayed as bullet points.
So we need a way to apply these rules
only to "ul" elements that are
inside the navigation bar.
In this simple example,
we could apply them
only inside a "nav" element,
and that would work fine
in this case.
You can see that the links at the top
are all on the same line,
while the list in the main content
is displayed with bullet points.
This works in this case
because we have a single "nav" element
in our page.
But what if we have another
"nav" element somewhere else,
and we want to style it differently?
To be absolutely sure those styles
only apply to the elements
inside our NavBar component
we could add a "className"
to the root element
named like the React component itself.
So now that "nav" element
has class "NavBar"
and we can use this
in our CSS selectors.
Instead of applying these styles
to all "nav" elements
we can apply them only to
those who have class "NavBar".
And the result is the same
but our rules are more specific.
So this is a better approach,
but having to add a CSS class
to each React component by hand,
and then writing the correct rules
in a global CSS file
is still a bit of a pain,
especially once our code grows
and we have lots of components.
That's why these days there are
many libraries available for React
that give us "component-scoped styles".
In this example we're going to use
"styled-jsx"
which is a library created by Vercel,
that is the same company behind Next.js.
But this is just one of many possible options.
Next.js also supports
"CSS Modules" out of the box.
And if you prefer some other library
that works with React,
it should work with Next.js as well.
But let's have a look at how
styled-jsx works.
Let's comment out these
global NavBar styles for now,
and let's re-implement them
using styled-jsx.
We can actually remove
this "className" as well.
Ok. With styled-jsx
we can write our CSS rules
directly inside our JSX elements.
All we need to do is
add a "style" element
with a special property called "jsx".
We can insert this "style" element
wherever we like,
inside the JSX tree for our component,
but typically we put it
just before the end, like this.
Now, inside the element
we want a JSX expression that is
a backtick-delimited string.
This way the string can span
multiple lines,
and inside here we can write our styles,
using the regular CSS syntax.
For example, let's style
our "ul" element.
Let's go and copy the same styles
we were using in our global CSS file.
and just paste them here.
If we save,
you can see that the styles
have been applied to the NavBar.
If we look at the elements
as rendered in the browser,
you can see how styled-jsx
automatically added a "class"
to the "nav" element,
a class with a unique id
that starts with "jsx"
and then some random number.
And the same class is applied
to all the elements inside the NavBar as well.
That's how styled-jsx
makes sure that our styles
only apply to this component.
It's basically similar
to what we did earlier
when we manually added a class
to our NavBar component,
except that now styled-jsx
is doing it automatically for us.
Ok, now that we've seen how it works
let's go and copy the other styles as well
And paste all the rules
inside our component styles.
We can remove the ".NavBar" class,
since these styles are already isolated.
Ok, if we save now,
the links in the NavBar
have the expected styles,
but the other list in the main content
is not affected.
All right. We can now go and remove
those styles from the global CSS file.
All the NavBar-specific styles
are now inside the component itself,
where they belong.
I should also mention that,
to get syntax highlighting
and code completion
I had to install a couple of
Visual Studio Code extensions.
One is called
"styled-jsx Syntax Highlighting",
and the other one is
the "styled-jsx Language Server".
So you may want to install
those extensions as well.
But this is how styled-jsx works.
I personally like having
all the styles in the same place
as the component code.
That's what makes styled-jsx
a so-called "CSS-in-JS" solution.
And I also like being able to use
the regular CSS syntax.
But if you prefer some other
styling solution for React,
as I mentioned you should be able to use it
with Next.js as well.