Styling on the app editor can be managed at the component and app-level.
Styling can be defined at the component-level. CSS settings can be turned to global level.
Component-level CSS has priority over the global level.
Some components have pre-set options for styling. They can be configured from the
Components settings tab in the
Please note that these different style classes can be combined.
You can configure manually your own classes with our Rich Editor.
Elements like background color (incl. shadow, opacity), border (incl. style, radius), typography (incl. font size, family, weight, spacing) etc. can all be configured for each component.
For complex apps, you may not want to repeat the styling configuration on each component.
The Global CSS Editor is designed to give styling and theming across your entire app. This functionality offers a centralized location for defining, managing, and applying CSS rules. It's useful for ensuring consistent styling and for creating reusable themes.
The Global CSS Editor is a feature exclusive to Cloud plans and Self-Hosted Enterprise Edition. However, users on the Community Edition can still access and experiment with this tool directly in the editor for evaluation purposes, although these changes will not be reflected in the app preview.
Configure manually and replicate pre-set styling
Styling on a component level can be replicated to all the components of the same class from the Rich Editor.
Just click on
Convert to global CSS.