styled of styled component not working in nextjs

Shirshak Kandel answered on June 6, 2022 Popularity 10/10 Helpfulness 6/10

answer styled of styled component not working in nextjs

related styled components error in nextjs

styled of styled component not working in nextjs

Comment

//create .babelrc 
{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

yarn add -D babel-plugin-styled-components

// pages/_documents.js
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

Popularity 10/10 Helpfulness 6/10 Language javascript

Source: github.com

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Jun 06 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

Closely Related Answers

styled components error in nextjs

Comment

//update in new version of next.js
// at next.config.js add styledComponents:true in compiler
 @type {import('next').NextConfig}
const nextConfig = {
  /* config options here */
  reactStrictMode:true,
  compiler:{
    styledComponents:true,
  }
}

export default nextConfig

Popularity 9/10 Helpfulness 8/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 30 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

styled of styled component not working in nextjs

Contents

More Related Answers

styled of styled component not working in nextjs

Closely Related Answers

styled components error in nextjs

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.