From 5315146348615369e610027b245feb0de6aa8429 Mon Sep 17 00:00:00 2001
From: tonyvugithub <55034244+tonyvugithub@users.noreply.github.com>
Date: Sun, 17 Jan 2021 08:44:07 -0500
Subject: [PATCH] Modified _app and _document to ensure matching styling
between client and server
---
.eslintrc.js | 3 ++
src/frontend/next/src/pages/_app.tsx | 14 ++++++-
src/frontend/next/src/pages/_document.tsx | 50 +++++++++++++++++++++++
3 files changed, 65 insertions(+), 2 deletions(-)
create mode 100644 src/frontend/next/src/pages/_document.tsx
diff --git a/.eslintrc.js b/.eslintrc.js
index df426d33c7..bbae2e5de0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -26,6 +26,9 @@ module.exports = {
{
files: ['src/frontend/next/**/*.ts', 'src/frontend/next/**/*.tsx'],
plugins: ['@typescript-eslint'],
+ env: {
+ browser: true,
+ },
rules: {
'react/prop-types': 'off',
'react/react-in-jsx-scope': 'off',
diff --git a/src/frontend/next/src/pages/_app.tsx b/src/frontend/next/src/pages/_app.tsx
index 3f6dbc4c92..f0e6982cdc 100644
--- a/src/frontend/next/src/pages/_app.tsx
+++ b/src/frontend/next/src/pages/_app.tsx
@@ -1,8 +1,18 @@
+import { useEffect } from 'react';
import { AppProps } from 'next/app';
import '../styles/globals.css';
-const App = ({ Component, pageProps }: AppProps) => {
+// Reference: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_app.js
+const AppComponent = ({ Component, pageProps }: AppProps) => {
+ // This hook is for ensuring the styling is sync between client and server
+ useEffect(() => {
+ // Remove the server-side injected CSS.
+ const jssStyles = document.querySelector('#jss-server-side');
+ if (jssStyles) {
+ jssStyles.parentElement?.removeChild(jssStyles);
+ }
+ }, []);
return