# @next/next/no-styled-jsx-in-document

> Disallow `<style jsx>` in `pages/_document.js`

Next.js doesn't support `styled-jsx` in `pages/_document.js`. Put the styles in `pages/_app.js`, in a component, or in a CSS file.

The rule checks files named `_document.*`.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"@next/next/no-styled-jsx-in-document" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"filename": "pages/_document.jsx"} */}
```jsx
import { Head, Html, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <style jsx>{`
          body {
            margin: 0;
          }
        `}</style>
      </body>
    </Html>
  );
}
```

Not reported, in `pages/_app.jsx`:

{/* good {"filename": "pages/_app.jsx"} */}
```jsx
export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <style jsx global>{`
        body {
          margin: 0;
        }
      `}</style>
    </>
  );
}
```
