glaze logo (donut emoji)glaze

Quick Setup

Installation

npm install glaze treat

Generating CSS on the fly

To enable client-side injection of styles, wrap the entry point of your application as shown:

import { StyleInjectorProvider } from 'glaze';
function App({ children }) {
return <StyleInjectorProvider>{children}</StyleInjectorProvider>;
}

Later on, you may decide to opt out of the dynamic runtime to shrink bundle sizes.

Usage

Vanilla

Style elements with the sx function, as inspired by Theme UI:

import { useStyling } from 'glaze';
function Component() {
const sx = useStyling();
return <p className={sx({ background: 'pink' })}>Hello, world!</p>;
}

Multiple class names can be concatenated through a template literal:

function CustomizableComponent({ className }) {
// …
return <p className={`${sx({ background: 'pink' })} ${className}`}>…</p>;
}

sx prop via transforms

A terser syntax is available once setting up babel-plugin-glaze. The following code produces output identical to the main vanilla example:

function Component() {
return <p sx={{ background: 'pink' }}>Hello, world!</p>;
}

Style composition is done analogously to above when a className prop is specified:

function CustomizableComponent({ className }) {
// `{...props}` containing `className` works similarly
return <p sx={{ background: 'pink' }} className={className}>…</p>;
}
info

For brevity, this syntax is preferred throughout the documentation. However, vanilla and transform-based approaches may be used interchangeably.

Edit this page