5211ac5cae
* Adds consistency to ESLint rules. * Fixes lint errors. * Fixes manifest. * Adds missing title. * Fixes copy / paste error. Co-authored-by: Lee Robinson <me@leerob.io> * Update errors/no-script-in-document.md Co-authored-by: Lee Robinson <me@leerob.io> * Update errors/no-sync-scripts.md Co-authored-by: Lee Robinson <me@leerob.io> * Updates a couple of rule descriptions. * Adds redirects. * Fixes unit tests. * Removes duplicated section. * Updates `no-before-interactive-script-outside-document` description. * Fixes lint. * Fixes integration tests. * Adds description to `no-before-interactive-script-outside-document` documentation. * Removes `link-passhref` from rules list. * Updates remaining `pages/_middleware.js` references. * Adds consistancy to messaging in new `no-styled-jsx-in-document` rule. * Apply suggestions from code review * Apply suggestions from code review Co-authored-by: Lee Robinson <me@leerob.io> Co-authored-by: Tim Neutkens <tim@timneutkens.nl> Co-authored-by: JJ Kasper <jj@jjsweb.site>
43 lines
1.4 KiB
Markdown
43 lines
1.4 KiB
Markdown
# 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](https://nextjs.org/docs/advanced-features/custom-document).
|
|
|
|
### Possible Ways to Fix It
|
|
|
|
If you need shared CSS for all of your pages, take a look at the [Custom `App`](https://nextjs.org/docs/advanced-features/custom-app) file or define a custom layout.
|
|
|
|
For example, consider the following stylesheet named `styles.css`:
|
|
|
|
```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
|
|
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](https://nextjs.org/docs/advanced-features/custom-document#caveats)
|
|
- [Layouts](https://nextjs.org/docs/basic-features/layouts)
|
|
- [Built in CSS Support](https://nextjs.org/docs/basic-features/built-in-css-support)
|
|
- [Custom `App`](https://nextjs.org/docs/advanced-features/custom-app)
|