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.
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.
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.
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
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.
Top comments (3)
Thank you, Eduardo for sharing your experience in a series.
There is a "series" tag, which you can use to link "learning NextJS" series.
You can refer to the Editor Guideline 😉
Wow did not know about that. Pretty useful. Thanks!
Thank you for the update, Eduardo~ o( ̄▽ ̄)ブ