How to use the emotion.injectGlobal function in emotion

import PropTypes from 'prop-types';
import { withPrefix } from 'gatsby-link';

// This is a gatsby limitation will be fixed in newer version
let globalStyles = require(`!raw-loader!@patternfly/react-core/../dist/styles/base.css`);
globalStyles = globalStyles.replace(/\.\/assets\//g, withPrefix('/assets/'));
const localStyles = require(`!raw-loader!./index.css`);
import { injectGlobal } from 'emotion';

injectGlobal(globalStyles);
injectGlobal(localStyles);

const propTypes = {
  children: PropTypes.func.isRequired
};

const Layout = ({ children }) => children();

Layout.propTypes = propTypes;

export default Layout;

import PropTypes from 'prop-types';
import { withPrefix } from 'gatsby-link';

// This is a gatsby limitation will be fixed in newer version
let globalStyles = require(`!raw-loader!@patternfly/react-core/../dist/styles/base.css`);
globalStyles = globalStyles.replace(/\.\/assets\//g, withPrefix('/assets/'));
const localStyles = require(`!raw-loader!./index.css`);
import { injectGlobal } from 'emotion';

injectGlobal(globalStyles);
injectGlobal(localStyles);

const propTypes = {
  children: PropTypes.func.isRequired
};

const Layout = ({ children }) => children();

Layout.propTypes = propTypes;

export default Layout;

componentDidMount() {
    this.props.withBaseStyles && injectGlobal(baseStylesheet(constants))
  }

__inject() {
      injectGlobal(rawCss);
    }
  };

}`
  }

  injectGlobal`
    ${fontFace(require('./vendor/fonts/Metropolis-Light.woff2'), 'Metropolis', 300)}
    ${fontFace(require('./vendor/fonts/Metropolis-Regular.woff2'), 'Metropolis', 400)}
    ${fontFace(require('./vendor/fonts/Metropolis-Medium.woff2'), 'Metropolis', 500)}
    ${fontFace(require('./vendor/fonts/Metropolis-SemiBold.woff2'), 'Metropolis', 600)}
    ${fontFace(require('./vendor/fonts/Metropolis-Bold.woff2'), 'Metropolis', 700)}
    ${fontFace(require('./vendor/fonts/NotoSans-Light-Latin.woff2'), 'Noto Sans', 300)}
    ${fontFace(require('./vendor/fonts/NotoSans-SemiBold-Latin.woff2'), 'Noto Sans', 600)}
    ${fontFace(require('./vendor/fonts/NotoSansThaiUI-Light.woff2'), 'Noto Sans Thai UI', 300)}
    ${fontFace(require('./vendor/fonts/NotoSansThaiUI-SemiBold.woff2'), 'Noto Sans Thai UI', 600)}
  `

  injectGlobal({
    'html, body': {
      fontFamily: Fonts.body,
      fontWeight: 300,
      fontSize: BASE_FONT_SIZE_MD,
      color: Colors.brightest,
      margin: 0,
      padding: 0,
      background: `linear-gradient(${Colors.darkest}, ${Colors.reactBright})`,
      [ViewType.mobile]: {
        fontSize: BASE_FONT_SIZE_XS,
      },
    },
    a: {
      textDecoration: 'none',
      color: Colors.brightest,
    },

        inject: () => injectGlobal(input)
      }

__inject() {
      injectGlobal(rawCss);
    }
  };

        inject: () => injectGlobal(input),
        raw: input

return document
    .getElementById(id)
    .animate(
      [
        { opacity: 1, transform: 'translateX(0px)' },
        { opacity: 0, transform: 'translateX(400px)' }
      ],
      {
        duration: 600,
        iterations: 1,
        easing: 'ease-in-out'
      }
    )
}

injectGlobal('body{background:', hexToRgba('#4f4f4f', 4.2), '}')

var Layout = (function(_React$Component) {
  inherits(Layout, _React$Component)

  function Layout() {
    var _ref

    var _temp, _this, _ret

    classCallCheck(this, Layout)

    for (
      var _len = arguments.length, args = Array(_len), _key = 0;
      _key < _len;
      _key++
    ) {

function overrideRheostatStyles() {
  if (rheostatStylesOverriden) return;
  injectGlobal(rheostatOverrides);
  rheostatStylesOverriden = true;
}