Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/davesnx/styled-ppx/llms.txt

Use this file to discover all available pages before exploring further.

%styled.global / [%styled.global] injects styles directly into the document without generating or attaching any scoped class name. Unlike %cx and %styled.*, which scope their rules to a generated class, the rules you write inside %styled.global are applied exactly as written — making it the right tool for resets, base typography, and document-level selectors.

​
Basic usage

The CSS string is parsed in stylesheet mode: top-level selectors stay as written, just as they would in a .css file. 
%styled.global(`
  html, body {
    margin: 0;
    padding: 0;
  }
`)

​
Differences from %cx and %styled.*

Feature%styled.global%cx / %styled.*
Scoped to a generated classNo — globalYes
Accepts top-level selectorsYesNo (needs & nesting)
Returns a class nameNoYes
Good for resets / base styles✅❌

​
@font-face warning

Do not place @font-face declarations inside %styled.global. Because emotion has a small runtime that applies global styles to the DOM, @font-face rules defined this way are fetched later than styles declared in the document head. This delays font loading and causes a Flash of Unstyled Text (FOUT).
Put @font-face declarations directly in your HTML <head> or in a static style.css file that is loaded before JavaScript. This ensures the browser can start downloading fonts at the earliest opportunity.
Similarly, avoid @import inside %styled.global for the same reason — the network request for the imported resource will not start until the emotion runtime runs.

Build docs developers (and LLMs) love

Get started for freeTalk to us