feat: upgrade to styled-components v4

2 files changed, 7 insertions, 7 deletions

diff --git a/packages/instant/src/style/fonts.ts b/packages/instant/src/style/fonts.ts
index 975a30a61..f305fd612 100644
--- a/packages/instant/src/style/fonts.ts
+++ b/packages/instant/src/style/fonts.ts
@@ -1,10 +1,10 @@
-import { injectGlobal } from './theme';
-
 export const fonts = {
     include: () => {
         // Inject the inter-ui font into the page
-        return injectGlobal`
-            @import url('https://rsms.me/inter/inter-ui.css');
-        `;
+        const head = document.head || document.getElementsByTagName('head')[0];
+        const style = document.createElement('style');
+        style.type = 'text/css';
+        style.appendChild(document.createTextNode(`@import url('https://rsms.me/inter/inter-ui.css')`));
+        head.appendChild(style);
     },
 };
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index d26c816c1..be527a12c 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -1,6 +1,6 @@
 import * as styledComponents from 'styled-components';
 
-const { default: styled, css, injectGlobal, keyframes, ThemeProvider } = styledComponents;
+const { default: styled, css, keyframes, ThemeProvider } = styledComponents;
 
 export type Theme = { [key in ColorOption]: string };
 
@@ -28,4 +28,4 @@ export const theme: Theme = {
     darkOrange: '#F2994C',
 };
 
-export { styled, css, injectGlobal, keyframes, ThemeProvider };
+export { styled, css, keyframes, ThemeProvider };