@gtkx/css / css

Function: css()

css(...args): CSSClassName

Defined in: css.ts:90

Creates a CSS class from style definitions.

Uses Emotion's CSS-in-JS system adapted for GTK CSS. Supports nested selectors using & for the parent selector reference.

Parameters

Parameter	Type	Description
...args	CSSInterpolation[]	CSS style definitions (objects, template literals, or interpolations)

Returns

CSSClassName

A unique class name to use with cssClasses prop

Examples

import { css } from "@gtkx/css";

const buttonStyle = css({
  padding: "8px 16px",
  borderRadius: "4px",
  "&:hover": {
    backgroundColor: "@accent_bg_color",
  },
});

<GtkButton cssClasses={[buttonStyle]} label="Styled Button" />

// Template literal syntax
const labelStyle = css`
  font-size: 14px;
  color: @theme_text_color;
`;

See

• cx for combining class names
• injectGlobal for global styles