fix: Use inline style override to reset sdk styles

newrelic · Jun 2, 2020 · 4dc68cf · 4dc68cf
1 parent c35cc0f
commit 4dc68cf
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -7,6 +7,18 @@
 // This is needed to ensure the NR1 SDK can load properly
 const React = require('react');
 
+const sdkStyleOverrides = `
+html {
+  line-height: 1.15;
+}
+
+body {
+  font-size: 16px;
+  line-height: 1.2;
+  color: var(--color-black);
+}
+`;
+
 exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
   replaceHeadComponents([
     ...getHeadComponents(),
@@ -35,5 +47,8 @@ exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
       crossOrigin="anonymous"
       src="//nr1.nr-assets.net/lib/d3/3.5.17/d3.js"
     />,
+    <style key="sdk-overrides" id="sdk-overrides">
+      {sdkStyleOverrides}
+    </style>,
   ]);
 };
diff --git a/src/hooks/useSdk.js b/src/hooks/useSdk.js
@@ -4,7 +4,9 @@ import { JS_BUNDLE, CSS_BUNDLE } from '../utils/sdk';
 
 const useSdk = () => {
   const scriptLoaded = useScript(JS_BUNDLE);
-  const stylesheetLoaded = useStylesheet(CSS_BUNDLE);
+  const stylesheetLoaded = useStylesheet(CSS_BUNDLE, {
+    insertBefore: 'sdk-overrides',
+  });
 
   return scriptLoaded && stylesheetLoaded;
 };

diff --git a/src/hooks/useStylesheet.js b/src/hooks/useStylesheet.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-const useStylesheet = (src) => {
+const useStylesheet = (src, { insertBefore } = {}) => {
   const [loaded, setLoaded] = useState(false);
 
   useEffect(() => {
@@ -10,10 +10,15 @@ const useStylesheet = (src) => {
     link.crossOrigin = 'anonymous';
     link.onload = () => setLoaded(true);
     link.href = src;
-    document.head.prepend(link);
+
+    if (insertBefore) {
+      document.head.insertBefore(link, document.getElementById(insertBefore));
+    } else {
+      document.body.appendChild(link);
+    }
 
     return () => document.head.removeChild(link);
-  }, [src]);
+  }, [src, insertBefore]);
 
   return loaded;
 };