Reuse style across elements in your project by creating and linking classes
How to create a CSS class
How to edit a CSS class
How to link a CSS class to a node
1. How to create a CSS class
Classes are sets of styles that can be reused on multiple elements. They are defined on the project level and can be seen in the CSS Classes Panel. From this panel you can create, search or edit classes. When you hit the + button another panel will open where you can give our class a name and the desired styles.
Another way to create a class is directly on the element where you want to use it. From the Classes panel in the Inspector you can search for an existing class or create a new one. When you create a new class this will be immediately linked to the selected element and all the styles on the element will be transferred onto the class by default. However there is a toggle button with the label '_Extract element styles_' and you can choose whether to move the styles in the class or keep them on the element.
2. Default classes
Every project comes with three default classes (button, input and textarea) that are applied on the elements corresponding to the names of the classes. You cannot delete or rename them, but you can edit the styles.
When you add one of these three elements in your project you will notice that they already have their default class linked and it cannon be removed. If you change the styles from one of these classes you will notice that all the new elements that you will add will also inherit these changes.
3. How to edit a CSS class
You can edit the class styles from the Edit Class Panel as you would in the Advanced Inspector. Another way is by setting styles o the element first and the transferring them onto the class by pressing the '_Extract new styles_' button at the top of the Edit Class Panel. This option is only available if you edit the class from the Inspector panel.
Keep in mind that the changes you make on the class will affect all the elements that are linked to that class, not only the selected element.
4. How to link a CSS class to a node
In order to link a class to a node simply search for the desired class in the search input from the Classes section and select the class. You will be able to see the changes immediately in the Stage area.
You can also toggle CSS classes to see how elements look with or without them.
Updated on: 02/03/2023