nested-styled-jsx-tags.mdx
title: 'Nested <style jsx> tags'
Why This Error Occurred
You have nested <style jsx> tags in a component. <style jsx> tags must be at the root of a styled-jsx scope.
Possible Ways to Fix It
Before
const Component = () => (
<div>
<p>
Hello world
<style jsx>{`
p {
color: white;
}
`}</style>
</p>
<style global jsx>{`
body {
background: black;
}
`}</style>
</div>
)
After
const Component = () => (
<div>
<p>Hello world</p>
<style jsx>{`
p {
color: white;
}
`}</style>
<style global jsx>{`
body {
background: black;
}
`}</style>
</div>
)
Useful Links
Rendered from the public repository vercel/next.js on GitHub; content belongs to its authors. Cached for up to an hour.