From 4dc68cf2fe1e10310d3c53563d58c7de1588c7c6 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Tue, 2 Jun 2020 16:58:25 -0700
Subject: [PATCH] fix: Use inline style override to reset sdk styles

---
 gatsby-ssr.js              | 15 +++++++++++++++
 src/hooks/useSdk.js        |  4 +++-
 src/hooks/useStylesheet.js | 11 ++++++++---
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 41ae50b21..a0f4f1ac8 100644
--- 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
index 389b15304..ad40b2d5f 100644
--- 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
index db6dd75f8..a603a79cf 100644
--- 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;
 };