@css-hooks/recommended NPM

Overview

Hooks add CSS features to native inline styles, enabling you to apply styles conditionally based on pseudo-classes, custom selectors, media queries, and more—all without leaving the style prop. By exploiting the hidden programmability of CSS Variables, CSS Hooks delivers a flexible CSS-in-JS experience without runtime style injection or build steps.

Feature highlights

Pseudo-classes

<button
  style={css({
    background: "#004982",
    color: "#eeeff0",
    on: $ => [
      $("&:hover", {
        background: "#1b659c",
      }),
      $("&:active", {
        background: "#9f3131",
      }),
    ],
  })}
>
  Save changes
</button>

Selectors

<label>
  <input type="checkbox" checked />
  <span
    style={css({
      on: $ => [
        $(":checked + &", {
          textDecoration: "line-through",
        }),
      ],
    })}
  >
    Simplify CSS architecture
  </span>
</label>

Responsive design

<>
  <span
    style={css({
      on: ($, { not }) => [
        $(not("@container sm"), {
          display: "none",
        }),
      ],
    })}
  >
    sm
  </span>
  <span
    style={css({
      on: ($, { not }) => [
        $(not("@container lg"), {
          display: "none",
        }),
      ],
    })}
  >
    lg
  </span>
</>