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.

    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