2023-07-05 15:11:16 +02:00
---
title: 'No `styled-jsx` in `_document`'
---
2022-05-23 04:32:13 +02:00
2022-06-14 04:17:42 +02:00
> Prevent usage of `styled-jsx` in `pages/_document.js`.
2023-07-05 15:11:16 +02:00
## Why This Error Occurred
2022-05-23 04:32:13 +02:00
2023-07-05 15:11:16 +02:00
Custom CSS like `styled-jsx` is not allowed in a [Custom Document](/docs/pages/building-your-application/routing/custom-document).
2022-05-23 04:32:13 +02:00
2023-07-05 15:11:16 +02:00
## Possible Ways to Fix It
2022-05-23 04:32:13 +02:00
2023-07-05 15:11:16 +02:00
If you need shared CSS for all of your pages, take a look at the [Custom `App`](/docs/pages/building-your-application/routing/custom-app) file or define a custom layout.
2022-05-23 04:32:13 +02:00
For example, consider the following stylesheet named `styles.css`:
2023-07-05 15:11:16 +02:00
```css filename="styles.css"
2022-05-23 04:32:13 +02:00
body {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
'Arial', sans-serif;
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}
```
Create a `pages/_app.{js,tsx}` file if not already present. Then, import the `styles.css` file.
2023-07-05 15:11:16 +02:00
```jsx filename="pages/_app.js"
2022-05-23 04:32:13 +02:00
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
```
These styles (`styles.css`) will apply to all pages and components in your application.
2023-07-05 15:11:16 +02:00
## Useful Links
2022-05-23 04:32:13 +02:00
2023-07-05 15:11:16 +02:00
- [Custom Document Caveats](/docs/pages/building-your-application/routing/custom-document#caveats)
- [Layouts](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern)
- [Built in CSS Support](/docs/pages/building-your-application/styling)
- [Custom `App`](/docs/pages/building-your-application/routing/custom-app)