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.


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

The root class name can be applied to a component node by using our React integration.

/* comp.jsx */
import React from 'react';
import { style, classes } from './';

class Comp extends React.Component {
    render () {
        return (
            <div className={style(classes.root, {}, this.props.className)} />

Root can also define states and extend another component.