import React from 'react' ; import { ThemeProvider , createGlobalStyle , StyleSheetManager , StyleSheetManagerProps , } from 'styled-components' ; import { normalize } from 'styled-normalize' ; import theme from './theme' ; import global from './globalStyles' ; const GlobalStyle = createGlobalStyle `
  ${ normalize }
  ${ global }
` ; type ManagerProps = { children ? : React . ReactNode ; target ? : StyleSheetManagerProps [ 'target' ] ; } ; /**
 * See https://styled-components.com/docs/api#stylesheetmanager
 * Target provides an alternate DOM node to inject styles info
 *
 * Example:
 * In your app's <head>:
 * <style id="styled-components-target"></style>
 *
 * When rendering ThemeProvider:
 * <ThemeProvider target={document.getElementById('styled-components-target')} />
 * */ function Manager ( { target , children } ) { if ( ! target ) { return < > { children } < />; } return < StyleSheetManager target = { target } > { children } < /StyleSheetManager>; } Manager . displayName = 'MatchboxStyleSheetManager' ; export type ThemeProviderProps = { skipGlobalStyles ? : boolean ; theme ? : { [ key ] : any ; } ; target ? : StyleSheetManagerProps [ 'target' ] ; children ? : React . ReactNode ; } ; prop function Theme ( props ) { return ( < Manager target = { props . target } > < ThemeProvider theme = { { ... theme , ... props . theme } } > { } { ! props . skipGlobalStyles && < GlobalStyle />} { props . children } < /ThemeProvider> < /Manager>); } Theme . displayName = 'MatchboxThemeProvider' ; export default Theme ;