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.