This guide walks you through the basics of how to style and work with components using Stylable.
You use Stylable with a component file (for example using React), along with a Stylable CSS file that has the extension
This guide shows the
JSX side of our @stylable/webpack-plugin integration with React.
Stylable styles are similar to a type-system. Once you have declared that a CSS class is of the type
Button for example, Stylable knows its internal structure and can match its internal parts and states.
Whether creating your own components or using components you imported from a 3rd party, you want to be able to access and style the internal parts of every component in the scope of your page or application.
Let's say you have a
Button component with a render function per this example. You can style its JSX using the
className property straight from the style object, or by executing the style runtime function (see the
root node as an example).
Now in the component's Stylable CSS file called
button.st.css, you can declare each of the classes as a ruleset as follows:
When using Stylable, every component exposes an API that's usable by its parent components.
The API includes:
- Pseudo-elements: any HTML element that has the className attribute, and is therefore exposed via a pseudo-element.
- Pseudo-classes: any state connected to the component logic, and declared as a pseudo-class.
Let's see how to create your own parts and states and expose them for use throughout a page or application.
In the example above, you created a very simple button component. Now let's import this button into a
Panel component. The classes that you created above are available as pseudo-elements of the imported component.
You can now style your
Button in the scope of the
Panel so that it fits its needs.
Let's take the
Button component and import it into the JSX file, and also add it to the render:
Let's also import
Button's stylesheet into the
Panel stylesheet. You can then target the internal parts of the component that you imported:
You can also create custom states for the component that are available as pseudo-classes to anyone using your component.
A custom pseudo-class can be used to reflect any logical state of your component. For example, your
Button has a state called
on. In this example, it is toggled when the button is clicked.
You can then target
on state in your
panel component as follows: