How to use Roblox's StyleSheet system

Resources Community Tutorials
#1

Stylesheets are a work in progress Roblox feature which provides a declarative way to apply multiple properties to instances:

Currently (as of this post) StyleSheets only work inside plugin widgets, to enable them everywhere you need to use the following fflags:

{
	// Enables styling everywhere.
	"FFlagEnableStylingEverywhere": "true",

	// Enables the Style Editor plugin.
	"FFlagEnableStyleEditor": "true",
	
	// Required so you can use `:ResetPropertyToDefault()` and `:IsPropertyModified()`.
	"FFlagEnableModifiedPropertyLuaApis": "true"
}

Default and Modified properties.

Only properties that have not been modified can be affected by StyleSheets.

Be careful when inserting Instances into the DataModel via the Explorer as some properties may get automatically modified which means StyleSheets can’t affect them.

You can check if a property for a specific Instance has been modified via the Instance:IsPropertyModified(name: string) method.

You can reset a modified property for an Instance to its default via the Instance:ResetPropertyToDefault(name: string) method.

StyleSheet

StyleSheet Instances are used to group multiple StyleRule Instances together.

StyleDerive

StyleDerive Instances are used to import all StyleRules from one StyleSheet into another. You set the StyleDerive’s StyleSheet property to StyleSheet you wish to import StyleRule’s from, and parent the StyleDerive to the StyleSheet you want to import the StyleRule’s into.

StyleLink

StyleLink Instances are used to link a StyleSheet to an Instance. You set the StyleLink’s StyleSheet property to the desired StyleSheet and parent the StyleLink to the target Instance.

StyleRule

The StyleRule Instance conditionally applies properties to instances based on its Selector property. They can be parented to a StyleSheet or another StyleRule Instance.

The following methods can be used to get properties from a StyleRule:

StyleRule:GetProperty(name: string)
StyleRule:GetProperties()

The following methods can be used to set properties for a StyleRule:

StyleRule:SetProperty(name: string, value: any)
StyleRule:SetProperties(table: { [string]: any })

Attributes

StyleRule’s attributes can be used for a properties value by prefixing a string with $:

StyleRule:SetProperty("SomePropertyName", "$SomeAttributeName")

Selectors

Selectors allow you to specify which Instances a StyleRule should be applied to.

Instance Selectors

Name Prefix Description
Class Selector n/a Styles instances with a specific class name.
Name Selector # Styles instances which have a specific name.
Tag Selector . Styles instances which have a specific tag.
State Selector : Styles instances which have a specific state active (e.g. hover).
Pseudo Selector :: Creates a new instance of a specific class name. (Please note that only certain instances have been whitelisted to be used as a pseudo-selector).

  • For example the following selector would only select Instances with the name FooBar :

    #FooBar

  • You can specify that an Instance must match multiple selectors by separating them via a whitespace:

    #FooBar .Secondary

    The example above only selects Instances with the name FooBar and the tag Secondary .

  • You can apply multiple selectors to the same StyleRule via a comma separated list.

    TextLabel, TextButton

    The example above only selects Instances that are either a TextLabel or a TextButton.

Hierarchy Selectors

Name Symbol Description
Child Selector > Specifies that the selector after it must be a child of the selector before it.
Descendants Selector >> Specifies that the selector after it must be a descendant of the selector before it.

  • For example the following selector would only select TextLabels which are children of ImageButton’s:

    ImageButton > TextLabel

  • This example would only select all descendants which have the tag HelloWorld

    >> .HelloWorld

Selectors by default will only affect the parent of the StyleLink as well as the siblings of the StyleLink.

This also applies to sub-rules (StyleRules parented to another StyleRule). Unlike CSS where sub-rules will implicitly select children, selecting children and descendants in Roblox’s styling system always needs to be explicitly defined.

You can think of sub-rules as using its ancestors selectors as a prefix for its own.

20 Likes
#2

CSS in roblox, seems cool…

charalimit

5 Likes
#3

cannot wait for this to come out holy

1 Like