From 1849fa7e61dfe4e14ea5c6afbeb1fcde7ea7c0e8 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 | 10 ++++++
src/frontend/next/src/pages/_document.tsx | 44 +++++++++++++++++++++++
3 files changed, 57 insertions(+)
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..ba1dd792c5 100644
--- a/src/frontend/next/src/pages/_app.tsx
+++ b/src/frontend/next/src/pages/_app.tsx
@@ -1,7 +1,17 @@
+import { useEffect } from 'react';
import { AppProps } from 'next/app';
import '../styles/globals.css';
+// Reference: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_app.js
const App = ({ 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