mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
P41T
8e8dd0c8c2
What? This PR updates the dependency "prettier" from version 3.2.5 to version 3.6.2. It also modifies other scripts by using the pnpm run prettier-fix after updating the dependency. Why? This is updated to benefit from the changes and fixes introduced in the newer versions of prettier, from versions 3.3 to 3.6. How? The package has been updated using pnpm install prettier@latest, and the files other than package.json and pnpm-lock.json have been modified using the script pnpm run prettier-fix. This PR does only have formatting changes introduced by the updated dependency This PR is the same as #82719 , with fixes implemented to prevent prettier to modifiy symlink files
47 lines
1.5 KiB
Plaintext
47 lines
1.5 KiB
Plaintext
---
|
|
title: 'No `styled-jsx` in `_document`'
|
|
---
|
|
|
|
> Prevent usage of `styled-jsx` in `pages/_document.js`.
|
|
|
|
## Why This Error Occurred
|
|
|
|
Custom CSS like `styled-jsx` is not allowed in a [Custom Document](/docs/pages/building-your-application/routing/custom-document).
|
|
|
|
## Possible Ways to Fix It
|
|
|
|
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.
|
|
|
|
For example, consider the following stylesheet named `styles.css`:
|
|
|
|
```css filename="styles.css"
|
|
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.
|
|
|
|
```jsx filename="pages/_app.js"
|
|
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.
|
|
|
|
## Useful Links
|
|
|
|
- [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/app/getting-started/css)
|
|
- [Custom `App`](/docs/pages/building-your-application/routing/custom-app)
|