44d1a1cb15
This PR is part of a larger effort to migrate error messages to MDX and use App Router: https://github.com/vercel/front/pull/23459
31 lines
632 B
Text
31 lines
632 B
Text
---
|
|
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.
|
|
|
|
```jsx filename="example.js"
|
|
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](/docs/pages/building-your-application/styling/css-in-js)
|
|
- [styled-jsx documentation](https://github.com/vercel/styled-jsx)
|