0
184
ViewsAdding inline stylesheets in HEAD on Next.js blog
I have a blog (http://minid.net) in Jekyll that I want to migrate to Next.js. My blog doesn't use an external file for styles. I embedded all the styles in the HEAD element using a STYLE element. In Next.js, i created a Style.js component, that returns body {} but that throws an error.
export default function Styles() {
return <style>body{background: red;}</style>;
}
My blog benefits from not having to use external files, each generated HTML has its styles, so I don't want to use the traditional global stylesheet for Next.js.
How can I solve this?
·
Juan Pablo Isaza
1 answers
Answer question0
Take a read through this section of the docs: https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js
In summary you have to put the children of the style element inside of a string enclosed in brackets.
export default function Styles() {
return (
<style jsx>{`
body{
background: red;
}
`}</style>;
}
·
Juan Pablo Isaza
Report
Answer question