So now we had a look at how nextjs works and how we work with components in
nextjs, how we can build our react application with nextjs in its core basics.
Now what about styling? In create react app,
we use css modules but I taught you that you have other options too.
What do we actually do when you're working with nextjs? Nextjs has its own way of styling
react,
you can still use inline styles, you can still use radium, css modules,
you can't use that here because you can't access the webpack configuration nextjs uses but it offers
another out of the box working way of styling your components and having scoped styling.
Let's say for the user component, you add a style tag, style html element to your component jsx like
this
and then on that style, you set jsx as a prop, jsx is a prop
understood by style here because next use a special package which is called styled-jsx,
you can learn more about this on the github page of nextjs of course and styled-jsx is a package
which just allows you to write your css styles
here in your jsx code and then it will pull them out,
apply them to your component here and scope it to that component.
Again you can see how it works on the official github page of nextjs.
.
So here you can also use media queries and so on
and therefore, I could also write a div
here and style that. Important, you need to wrap all of that in curly braces and then two back ticks,
now these are not single quotation marks but back ticks which allow you to create string literals in
javascript so basically multi-line strings you could say. Now in there, you can now style your div, like
that
and for example give it a border of 1px solid #eee, box-shadow of 0 2pxs 3px
#ccc and a padding of 20px and maybe also text align center.
Now with that, if we go back to the auth page, this is how our user now looks like.
So this is how we style components in nextjs,
we use this third party package, styled-jsx to create styles which are scoped to that given component.