Skip to content

ref.asContainer()

Make the element that has a ref a named container for ref.at() queries.

View as Markdown

card.asContainer(type?) sets container-name on the element, and it sets container-type when you pass a type. Query the container with card.at().

Example

Source

import { style } from "stillwind/react";

const card = style.ref("card");
export const container = style(card, card.asContainer("inline-size"), "p-4");

Compiled code

const card = undefined;
export const container = {className:"sw_j0tj8 sw_card_uryy0"};

Generated CSS

.sw_j0tj8 {
  padding: calc(var(--spacing) * 4);
}

.sw_j0tj8:where(.sw_card_uryy0) {
  container-name: sw-c-card-uryy0;
  container-type: inline-size;
}

Inputs

The type is a string literal:

  • normal, size, inline-size, or scroll-state
  • a supported combination of these
  • a CSS-wide keyword

Without a type, Stillwind does not set container-type, and the cascade decides its value. A type stored in a variable is not accepted.

Behavior

Pass card and card.asContainer() in the same style() call. The container declarations apply only to an element that has the ref, and missing-ref-attachment reports a call without it.

When another rule on the element also sets container-name or container-type, conflicting-provider-properties reports it.