chore: use to ensure styles remain the same

Author: jerelmiller

gatsby-ssr.js

@@ -7,18 +7,6 @@
 // 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(),
@@ -47,8 +35,5 @@ 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>,
   ]);
 };

src/components/styles.scss

@@ -51,17 +51,21 @@
 /*-- Reset --*/
 // https://github.com/necolas/normalize.css
 html {
-  line-height: 1.15;
+  line-height: 1.15 !important; // Prevent the SDK from overridding this value
   -webkit-text-size-adjust: 100%;
 }
 
 body {
   margin: 0;
-  font-size: 16px;
-  font-family: var(--primary-font-family);
-  color: var(--color-black);
+  font-size: 16px !important; // Prevent the SDK from overridding this value
+  font-family: var(
+    --primary-font-family
+  ) !important; // Prevent the SDK from overridding this value
+  color: var(
+    --color-black
+  ) !important; // Prevent the SDK from overridding this value
   background-color: var(--color-white);
-  line-height: 1.2;
+  line-height: 1.2 !important; // Prevent the SDK from overridding this value
 }
 
 main {