no-styled-jsx-in-document.mdx
title: 'No styled-jsx in _document'
Prevent usage of
styled-jsxinpages/_document.js.
Why This Error Occurred
Custom CSS like styled-jsx is not allowed in a Custom Document.
Possible Ways to Fix It
If you need shared CSS for all of your pages, take a look at the Custom App file or define a custom layout.
For example, consider the following stylesheet named 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.
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
Rendered from the public repository vercel/next.js on GitHub; content belongs to its authors. Cached for up to an hour.