UI 样式 | 文档 - Roblox 创作者中心

UI 样式是 Roblox 提供的样式表解决方案，类似于 CSS，允许你声明并全局应用对 UI 实例属性的覆盖。此引擎级支持是样式编辑器和端到端令牌管道的基础。

概念

样式规则（StyleSheet 的一部分）适用于每个与规则的 Selector 定义匹配的实例，以匹配类名、实例名和层次关系等特征。有关详细信息，请参阅 Selector 文档。

样式令牌，通过属性定义于令牌 StyleSheet，表示可在样式和组件之间使用的 UI 属性变量，例如 Frame.BackgroundColor3、TextLabel.TextColor3 和 UIStroke.Color 的共同颜色。令牌与 CSS 变量可比较。

样式主题，通过属性定义于主题 StyleSheet，由一组特定令牌组成，这些令牌可以互换，例如定义“明亮”和“黑暗”主题的颜色令牌。相关主题必须具有相同的令牌集才能正常工作。

样式查询允许你根据 UI 的上下文或环境有条件地应用样式。这些可以与 CSS 容器查询和媒体查询进行比较，允许 UI 根据屏幕大小、输入类型或用户辅助功能设置进行适配。

规则传播

StyleLink 实例将 StyleSheet 及其关联规则链接到父 ScreenGui 及其内部的所有 GuiObjects。每个树只能应用一个 StyleSheet。

选择器定义

在高层次上，通过规则的 Selector 定义进行实例匹配和修改，具体操作如下：

Roblox 类选择器，针对给定 GuiObject 类的所有实例，例如 Frame、ImageLabel、TextButton 等。
应用到特定 UI 对象的实例标签，通过 CollectionService。
根据 UI 对象的 Instance.Name 值进行实例名称选择。
实例修饰符，类似于 CSS 伪元素，通过虚幻的 UIComponents 应用，如 UICorner 或 UIStroke。
GuiObject 状态选择器，类似于 CSS 伪类选择器，对应于四个 GuiState 枚举值之一，例如 Hover。
Roblox 查询选择器，类似于 CSS 容器和媒体查询，使用 @ 前缀仅在同名的 StyleQuery 实例或伪实例处于活动状态时应用样式。

以下设置显示了如何使用大小和颜色令牌、主题和类选择器 "Frame" 创建一个大小为 200×200 像素的品红色 Frame。

代码等效

UI 类选择器
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local screenGui = script.Parent

-- 令牌
local tokens = Instance.new("StyleSheet")
tokens.Name = "Tokens"
tokens.Parent = ReplicatedStorage
tokens:SetAttribute("SquareS", UDim2.fromOffset(50, 50))
tokens:SetAttribute("SquareM", UDim2.fromOffset(100, 100))
tokens:SetAttribute("SquareL", UDim2.fromOffset(200, 200))
tokens:SetAttribute("Fit", UDim2.fromScale(1, 1))
tokens:SetAttribute("Magenta", Color3.fromHex("FF0099"))
tokens:SetAttribute("Gold", Color3.fromHex("FFCC00"))
tokens:SetAttribute("Aqua", Color3.fromHex("0093F0"))

-- ThemeA
local themeA = Instance.new("StyleSheet")
themeA.Name = "ThemeA"
themeA.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- 派生全局令牌
tokensDerive.Parent = themeA
themeA:SetAttribute("FrameSize", "$SquareM")
themeA:SetAttribute("FrameColor", "$Aqua")

-- ThemeB
local themeB = Instance.new("StyleSheet")
themeB.Name = "ThemeB"
themeB.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- 派生全局令牌
tokensDerive.Parent = themeB
themeB:SetAttribute("FrameSize", "$SquareL")
themeB:SetAttribute("FrameColor", "$Magenta")

-- 设计表
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "DesignSheet"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB  -- 从 ThemeB 派生
themeDerive.Parent = designSheet

-- 将 DesignSheet 链接到 ScreenGui
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = designSheet
styleLink.Parent = screenGui

-- 配置规则
local rule = Instance.new("StyleRule")
rule.Selector = "Frame"  -- 类选择器
rule.Parent = designSheet

-- 设置规则属性
rule:SetProperties({
	["BackgroundColor3"] = "$FrameColor",
	["Size"] = "$FrameSize",
	["BorderSizePixel"] = 0
})

local frame = Instance.new("Frame")
frame.Parent = screenGui

修改的属性

受样式影响的实例属性在属性窗口中标记为 ⚠，将鼠标悬停在受影响的属性上会显示哪个样式在影响它。例如，如果样式规则告知一个标记的 Frame 使用 AnchorPoint 的值为 0.5, 0.5，该对象属性将显示默认值 0, 0，但其实际的 AnchorPoint 将使用规则的样式化值。

当特定 UI 对象的默认或样式属性值进一步被修改时，它会变为粗体，以显示覆盖值。例如 — 假设默认的 AnchorPoint 为 0, 0 — 将该属性设置为 1, 1 对于特定实例显示出粗体的覆盖：

对于任何被覆盖的属性值，你可以在属性窗口中右键单击它并选择重置为默认以将其恢复为样式值，或者如果尚未样式化，则恢复为默认属性值。