Skip to main content

Root

Every Stylable stylesheet has a reserved class called root that matches the root node of the component. The root class is used to signify the component top-level node where a new namespace scope is created.

.root { 
  /* set component background */
  background: white; 
} 

/* OUTPUT */
.NAMESPACE__root { 
  background: white; 
}

Default export​

The root of a stylesheet can be referenced in other stylesheets by using the default import.

page.st.css
@st-import DropDown from './dropdown.st.css';

/* style any dropdown component background 
  nested under the page root */
.root DropDown {
  background: salmon;
}

/* OUTPUT */
.page__root .dropdown__root { 
  background: salmon; 
}

Runtime​

Each component is responsible for placing the root class on its top-level node using the runtime API.

simple example​

comp.jsx
import { classes } from './comp.st.css';

function Comp() {
  return <div className={classes.root}></div>;
}

root + state + customize​

The following example uses the st() function to add multiple classes:

  1. the component root class
  2. state classes
  3. classes passed from props for customizations
comp.jsx
import { st, classes } from './comp.st.css';

function Comp({ className }) {
  return (
    <div className={st(classes.root, {/*states*/}, className)}></div>
  );
}