Skip to content

ref().in()

Style an element from the state of a sibling, inside an ancestor that has another ref.

View as Markdown

trigger("hover").in(card) matches while the trigger element is hovered and an element with the card ref contains both the trigger element and the styled element. Use it to style an element from the state of a sibling.

Example

Source

import { style } from "stillwind/react";

const card = style.ref("card");
const trigger = style.ref("trigger");
export const container = style(card, "p-4");
export const button = style(trigger, "rounded-md px-4 py-2");
export const text = style({ [trigger("hover").in(card)]: "text-blue-600" });

Compiled code

const card = undefined;
const trigger = undefined;
export const container = {className:"sw_fxivy sw_card_uryy0"};
export const button = {className:"sw_92u2q sw_trigger_fvqcy"};
export const text = {className:"sw_yz349"};

Generated CSS

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

.sw_92u2q {
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  border-radius: var(--radius-md);
}

@media (hover: hover) {
  .sw_yz349:is(:where(.sw_card_uryy0):has(:where(.sw_trigger_fvqcy):hover) *) {
    color: var(--color-blue-600);
  }
}

Inputs

The receiver is a ref condition, such as trigger("hover") or trigger(). The argument is one of these:

Argument The scope element
card Has the card ref
card("focus-within") Has the card ref and matches the variants

The argument cannot use .in() or .at() itself.

Behavior

The scope element must be a strict ancestor of both elements. It cannot be the styled element itself.

Calling .in() more than once adds each scope as another condition, and every condition must match.

Write the whole chain directly as a computed key in style(). You cannot store it in a variable and use it later.

See Element relationships for a task-based example.