fixing _document.tsx

.babelrc

@@ -3,13 +3,6 @@
     "next/babel"
   ],
   "plugins": [
-    [
-      "styled-components",
-      {
-        "ssr": true,
-        "displayName": true,
-        "preprocess": false
-      }
-    ]
+    ["styled-components", { "ssr": true }]
   ]
 }

pages/_document.tsx

@@ -5,21 +5,31 @@ import { ServerStyleSheet } from 'styled-components';
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 export default class MyDocument extends Document {
-  // static getInitialProps({ renderPage }) {
-  //   // Step 1: Create an instance of ServerStyleSheet
-  //   const sheet = new ServerStyleSheet();
+  static async GetInitialProps(ctx) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
 
-  //   // Step 2: Retrieve styles from components in the page
-  //   const page = renderPage((App) => (props) =>
-  //     sheet.collectStyles(<App {...props} />),
-  //   );
+    try {
+      ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
+      });
 
-  //   // Step 3: Extract the styles as <style> tags
-  //   const styleTags = sheet.getStyleElement();
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          {sheet.getStyleElement()}
+        </>
+      )
+      };
+      } finally {
+        sheet.seal();
+      }
+  }
 
-  //   // Step 4: Pass styleTags as a prop
-  //   return { ...page, styleTags };
-  // }
 
     render() {
       return (

pages/dashboard.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-// import { DashboardView } from '../styles/layouts/dashboard/DashboardView'
+import { DashboardView } from '../styles/layouts/dashboard/DashboardView'
 
 import MapCard from '../src/components/mapCard/MapCard'
 import GraphCard from '../src/components/graph/graphCard/ChartCard'
@@ -9,7 +9,7 @@ import PageTitle from '../src/components/pageTitle/PageTitle'
 
 export default function Dashboard() {
   return (
-    <main>
+    <DashboardView>
       <Header name='' />
       <PageTitle title='Visão Geral' subtitle='Bem Vindo a Smart Energia' />
       <section className="cardsSection" >
@@ -25,6 +25,6 @@ export default function Dashboard() {
         <GraphCard title='Consumo' subtitle='Gráfico de Consumo' />
         <GraphCard title='Consumo' subtitle='Gráfico de Consumo' className='footerGraph' />
       </section>
-    </main>
+    </DashboardView>
   )
 }