Extend Stylable Stylesheet

Use the -st-extends directive rule to extend a CSS class with another stylesheet. This enables you to style pseudo-classes and pseudo-elements of the extended stylesheet.

Note
-st-extends can be applied only to class selectors and root.

In this example, the stylesheet is extending the toggle-button.css stylesheet. The checkBtn class has a label, which is a custom pseudo-element, and has a custom pseudo-class, toggled.

/* page.st.css */
@namespace "Page";
:import {
    -st-from: "./toggle-button.st.css";
    -st-default: ToggleButton;
}
.checkBtn {
    -st-extends: ToggleButton;
    background: white;
}
.checkBtn::label { color:green; } /* style pseudo element label */
.checkBtn:toggled::label { color:red; } /* style pseudo element label when check-box is toggled */

/* CSS output*/
.Page__root .Page__checkBtn.ToggleButton__root { background: white; }
.Page__root .Page__checkBtn.ToggleButton__root .ToggleButton__label { color: green; }
.Page__root .Page__checkBtn.ToggleButton__root[data-ToggleButton-toggled] .ToggleButton__label { color: red; }

/* React - Page component uses toggleButton component */
import ToggleButton from './toggle-button';
/* inside a stylable render */
<div>
    <ToggleButton className="checkBtn" />
</div>