Learning NextJs - Day 4

You can add css to your pages components using styled-jsx and since the creators of this library are the same than next you can use it without write a single line of configuration.

You will need the special style jsx component inside of your pages.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Home({ users }) {
return (
<div>
<h1>Users</h1>
{users.map(user => (
<p key={user.id}>{user.name}</p>
))}
<style jsx>{`
p {
color: blue;
}
`}</style>
</div>
);
}

export default Home;

This page will show a list of users and the name of each user will be blue since we are giving that color to the p element.

One advantage of style jsx is that our css is isolated from the rest of the world, in this case the world means other pages/components. So other p elements will remaing with the default color.

Global Styles

But what about if we want to all of the p elements have the same color? Easy, style jsx give you an special global prop.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Home({ users }) {
return (
<div>
<h1>Users</h1>
{users.map(user => (
<p key={user.id}>{user.name}</p>
))}
<style global jsx>{`
p {
color: blue;
}
`}</style>
</div>
);
}

export default Home;

Dynamic Styles

Let’s suppose your manager goes crazy and tell you that your users pages needs
a button for every user and if the ID of the user is greater than 5 the button background must be red otherwise green.

First you create a custom button component and you accept and ID prop and according to that writing a simple ternary you can make the crazy request.

1
2
3
4
5
6
7
8
9
10
11
12
function CustomButton({ children, id }) {
return (
<button>
{children}
<style jsx>{`
button {
background: ${id > 5 ? "red" : "green"};
}
`}</style>
</button>
);
}

Now in your home page just import the component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import CustomButtom from "./../components/CustomButtom";

function Home({ users }) {
return (
<div>
<h1>Users</h1>
{users.map(user => (
<div key={user.id}>
<p>{user.name}</p>
<CustomButtom id={user.id}>Click Me</CustomButtom>
</div>
))}
<style global jsx>{`
p {
color: blue;
}
`}</style>
</div>
);
}

export default Home;

And now you have dynamic styles using the values of props.