<button
style={pipe(
{
background: "#004982",
color: "#eeeff0",
},
on("&:hover", {
background: "#1b659c",
}),
on("&:active", {
background: "#9f3131",
})
})}
>
Save changes
</button>
<label>
<input type="checkbox" checked />
<span
style={pipe(
{},
on(":checked + &", {
textDecoration: "line-through"
})
)}
>
Simplify CSS architecture
</span>
</label>
<span
style={pipe(
{},
on(or("@container (width < 50px)", "@container (width >= 100px)"), {
display: "none"
})
)}
>
sm
</span>
<span
style={pipe(
{},
on("@container (width < 100px)", {
display: "none"
})
)}
>
lg
</span>
Hooks take the simplest styling approach to the next level, removing limitations to make it a viable solution for real-world use cases.
Effortlessly define styles for states like hover, focus, and active. Create engaging UIs without the complexity of external CSS.
Hooks enhance the way you already write inline styles, rather than forcing you to learn non-standard utility class syntax.
Hooks are pure, don't depend on style injection, and avoid shipping large volumes of irrelevant, render-blocking CSS.
Inline styles tightly integrate with markup, promoting local reasoning and allowing you to change components quickly and easily.
Directly embedded within HTML markup without side effects, hooks make server-side rendering simple and reliable. It just works.
Mark Dalgleish@markdalgleishCheck out CSS Hooks. This is *very* cool.
It lets you write type-safe inline styles (literally the `style`attribute *BUT* with support for a custom set of pseudo-classes, selectors, media/container queries — and nested too!
Ryan Florence@ryanflorenceThat's how I always wished the style prop worked!
Mykhaylo@mryechkinI absolutely love it. There's just something "fresh" about it. Simple to get started, practically no overhead, and it just makes sense. Best part is that it does this all using native CSS features, nothing fancy - just really cleverly done.
Nicolas@nicolas_dev_Looks exactly like what I always wanted the style property to be
Will be trying it out for sure!
Julien Delort@Julien_DelortI was _hooked_ at "no build step"!
Benton Boychuk-Chorney@b_e_n_t_e_n_I'm curious if there is a "catch" to css hooks, because from first glance it seems too good to be true!