Merge pull request #331 from jxnblk/fix-embed-styles

Move global styles to MDXDeck component

packages/components/src/MDXDeck.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Router, globalHistory, navigate } from '@reach/router'
+import { Global } from '@emotion/core'
 import { Swipeable } from 'react-swipeable'
 import querystring from 'querystring'
 import Provider from './Provider'
@@ -258,8 +259,20 @@ export class MDXDeck extends React.Component {
         break
     }
 
+    const style =
+      mode !== modes.PRINT ? (
+        <Global
+          styles={{
+            body: {
+              overflow: 'hidden',
+            },
+          }}
+        />
+      ) : null
+
     return (
       <Provider {...this.props} {...this.state} mode={mode} index={index}>
+        {style}
         <Catch>
           <GoogleFonts />
           <Wrapper {...this.props} {...this.state} modes={modes} index={index}>

packages/components/src/Provider.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import { Global } from '@emotion/core'
 import { ThemeProvider } from 'emotion-theming'
 import merge from 'lodash.merge'
 import { HeadProvider } from './Head'
@@ -28,20 +27,9 @@ export const Provider = props => {
     ...mdxComponents,
     ...themeComponents,
   }
-  const style =
-    props.mode !== 'print' ? (
-      <Global
-        styles={{
-          body: {
-            overflow: 'hidden',
-          },
-        }}
-      />
-    ) : null
 
   return (
     <HeadProvider tags={headTags}>
-      {style}
       <ThemeProvider theme={theme}>
         <MDXProvider components={allComponents}>
           <UserProvider {...props} />