Component styles

Below is a brief summary of component style properties. For a full video guide on Styles check out Core Lesson 5 — Styles

editing component styles

In summary:

  • Configuring style props is available via the style panel

  • Styles update as part of the context update loop, so dynamic bindings work automatically

  • Different style props are available for each UI component

  • Style properties have a value field and a binding icon

  • Styles have a default value that can be a static value or a theme variable binding; a style property can be reset back to this state via the "Component default" selection in the binding menu

  • Styles can be given an explicit static value by choosing the "Custom value" option

  • Styles can be bound directly to theme variables

  • Styles can be bound to formulas

  • The Set component styles flow function can be used to change style properties directly, but it is better to bind the style property to formula instead

For information on individual style properties, see the component style reference guide.