Every Stylable stylesheet has a reserved class called root that matches the root node of the component.

You can apply default styling and behavior to the component on the root class itself.


The root class is added automatically to root in React integration. No need to write className="root".

/* CSS */
@namespace "Comp";
.root { background: red; } /* set component background to red */
/* CSS output*/
.Comp__root { background: red; }

Root can also define states and extend another component.