Style Panel
Styles are configured on the component, four configurable sections are available (position, dimensions, layout, and styles). All stylable sections automatically bind to the first stylable instance inside a composed component. For code components, a className property is passed
Position
Provides position options. Usually, you’ll want this in all your composed components.
Position select option
List of available position options
Property options to determine the final location of the positioned component.
Dimensions
Input to define the Width and Height values of the component. Usually, you’ll want this in all your composed components
Width and Height dimensions input
Layout
Gives layout options, NOT recommended for a composed component unless you’re building a primitive like Box.
This Layout feature will work similarly to the auto layout feature that Figma uses.
Layout option
To add layout styles you will need to first select the + to add your styles.
Layout style editor
The layout editor provides a set of options for setting the layout of your components using CSS flexbox.
Styles
Free-form option where you can add CSS properties and rules as you see fit.
NOT recommended to be used with a composed component unless you’re building a primitive element component.
Styles option
The Add CSS property is an auto-complete input. When you begin typing a list of options you are looking for will show up as a selection.
autocomplete on the styles input
The Styels section will override any Position, Dimension, or Layout options you have set. For example, if you have set the Width and Height in the dimensions section, and then you set the Width and Height in the Styels section. The component will use the properties from the Styles section.
More Info
Watch an overview of properties panel
To learn more about CSS, visit MDN documentation
Updated about 2 months ago