Root

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.

Examples

/* 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 * as React from 'react';
import { style, classes } from './comp.st.css';

class Comp {
    constructor(props) {
        super(props);
    }

    render () {
        return (
            <div className={style(classes.root, {}, this.props.className)} />
        );
    }
}

Note
Root can also define states and extend another component.