vercel/next.js / errors / invalid-styled-jsx-children.mdx

---

title: 'Invalid styled-jsx children'

Why This Error Occurred

You have passed invalid children to a <style jsx> tag.

Possible Ways to Fix It

Make sure to only pass one child to the <style jsx> tag, typically a template literal.

const Component = () => (
  <div>
    <p>Red paragraph</p>
    <style jsx>{`
      p {
        color: red;
      }
    `}</style>
  </div>
)

Please see the links for more examples.

Useful Links

• Built-In CSS-in-JS
• styled-jsx documentation