globalStyle

Creates styles attached to a global selector.

Requires a selector string as the first parameter, followed by a style object.

app.css.ts

import { globalStyle } from '@vanilla-extract/css';

globalStyle('html, body', {
  margin: 0
});

CSS

html, body {
  margin: 0;
}

🧠 The global style object cannot use simple pseudo or complex selectors. This avoids unexpected results when merging with the global selector, e.g. ul li:first-child, a > span.

Global selectors can also contain references to other scoped class names.

app.css.ts

import { style, globalStyle } from '@vanilla-extract/css';

export const parentClass = style({});

globalStyle(`${parentClass} > a`, {
  color: 'pink'
});

CSS

.app_parentClass__sznanj0 > a {
  color: pink;
}

PreviousaddFunctionSerializer

NextcreateGlobalTheme