resolving CSS issue where the styles do not

appear on SSR. Github issues / discussions: gatsbyjs/gatsby#14601 (comment) gatsbyjs/gatsby#17914
MaxwellKendall · Feb 25, 2021 · 4aa6878 · 4aa6878
1 parent 967f76c
commit 4aa6878
Show file tree

Hide file tree

Showing 3 changed files with 508 additions and 473 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import moment from 'moment';
 import vsDark from 'prism-react-renderer/themes/vsDark';
@@ -11,11 +11,19 @@ export const izOffHrs = () => (
 require("github-markdown-css");
 
 export const ThemeContext = React.createContext({ izOffHrs: izOffHrs() });
+const hasWindow = typeof window === 'object';
 
 const SyntaxHighlighter = (props) => {
+    const [isClient, setClient] = useState(hasWindow);
     const className = props.children.props.className || "";
     const matches = className.match(/language-(?<lang>.*)/);
 
+    useEffect(() => {
+        if (!isClient) {
+            setClient(true);
+        }
+    }, []);
+
     return (
         <Highlight
             {...defaultProps}
@@ -30,7 +38,7 @@ const SyntaxHighlighter = (props) => {
             <pre className={className} style={style}>
                     {tokens.map((line, i) => (
                         <div {...getLineProps({ line, key: i })}>
-                            <div className="inline-block w-2 text-gray-400 pr-5 mr-5 border-gray border-r">{i + 1}</div>
+                            <div className="line-number">{i + 1}</div>
                             {line.map((token, key) => (
                                 <span {...getTokenProps({ token, key })} />
                         ))}