Inject global styles

%styled.global [%styled.global] is the method to apply general styles to your website.

%styled.global(`
  html, body {
    margin: 0;
    padding: 0;
  }
`)

[%styled.global {|
  html, body {
    margin: 0;
    padding: 0;
  }
|}];

Recommend to not add @font-face definitions as globals. Consider adding the font directly to the HTML or in a style.css file. More (opens in a new tab).

Since emotion (opens in a new tab) has a small run-time for those global styles to be applied to the DOM. In a regular style file this isn't an issue. Keeping @fonts-face or other @imports inside emotion will delay a bit their fetching and will cause a Flash of Unstyled Text (opens in a new tab).