内置的 样式编辑器 是一个全面的工具，允许您通过 令牌、设计表、样式规则 和 主题 的组合为 Roblox 游戏创建、管理和应用 UI 样式。
通过 UI 选项卡访问 样式编辑器。
打开后，单击 创建设计 按钮以生成基础样式集。
通过样式编辑器创建设计样式集会在 ReplicatedStorage 中的 Design 文件夹内生成一个 BaseStyleSheet。这个基础样式表会将特定的引擎级默认值（如 [163, 162, 165] 的 Color3 默认值）与来自 Studio 插入工作流的默认值同步。强烈建议您不要删除或尝试修改基础样式表——而是围绕设计表构建令牌和样式规则，以匹配您的 UI 目标。
此外，在 Design 文件夹中生成一个 StyleSheet 表，其中包含指向基础样式表的 StyleDerive。如果您选择删除该 StyleDerive，则 GuiObjects 的未样式值可能会变为意外值，例如默认的 Size 为 0, 0, 0, 0。
样式令牌
样式 令牌 通过 StyleSheet 的 属性 定义，表示可以在样式和组件中使用的 UI 属性变量；例如，可能会有一个用于 Frame.BackgroundColor3、TextLabel.TextColor3 和 UIStroke.Color 的公共颜色。令牌类似于 CSS 变量。
虽然不要求进行 UI 样式设计，但强烈建议使用令牌以便于可扩展的 UI 设计和样式更新。您应该首先创建以下令牌，以了解它们如何与通用样式的其他方面关联。
创建一个新的令牌样式表：
- 在样式编辑器的左侧列中，将鼠标悬停在 Tokens 上，单击 ⊕，然后选择 新建 令牌 样式表。
- 将新表重命名为 TokenSheet。
设计表
设计样式表聚合 样式规则，并可以链接到 DataModel 树，以将样式属性应用于 UI 实例。每个给定树只能应用一个 StyleSheet，尽管您可以使用 主题 在 UI 中切换相关样式，这一概念将在本指南后面介绍。
通过 创建设计 按钮创建一个名为 StyleSheet 的预填充设计表。它包含常见 UI 对象（如 Frame 和 TextLabel）的类规则。它还包含两个 StyleDerive 实例，这些实例从基础样式表中派生（继承） 令牌 和样式，以便在您的自定义样式配置中使用。
一旦您有了设计表，您可以设置一个测试 屏幕容器 以与样式编辑器一起使用，或者如果需要，可以设置一个 游戏内容器。
在 资源管理器 中将鼠标悬停在 StarterGui 上并插入一个 ScreenGui。
样式规则
样式 规则 应用于每个与规则的 Selector 定义匹配的实例，以匹配类名、实例标签和层次关系等特征。在高层次上，通过规则的 Selector 定义进行实例匹配和修改的操作如下：
- 根据 UI 对象的 Instance.Name 值选择实例名称。
类规则
样式 类 选择器针对给定 UI 类的所有实例。以下规则设置样式所有 Frames 具有统一的背景颜色和大小。
在样式编辑器的左侧列中，选择 Frame 在 UI Elements 分支中。
属性 样式令牌 BackgroundColor3 $Magenta Size $SquareL - 在主面板中单击 添加属性… 并选择所需的属性。请注意，您可以输入关键字以更快地在下拉菜单中找到属性。
- 不要输入静态值，而是单击 ⋮ 按钮并选择 链接 令牌。
- 单击出现在值字段中的 $ 并选择适当的关联令牌。
标签规则
实例 标签 选择器针对通过 CollectionService 标记 的特定 UI 对象。以下规则设置样式一个标记为 ButtonPrimary 的 TextButton，具有自定义背景颜色、字体和文本大小。
在样式编辑器的左侧列中，将鼠标悬停在 StyleSheet 表上，单击 ⋮ 按钮，然后导航到 新建 ⟩ 标签。
将新标签规则重命名为 .ButtonPrimary（注意前导 .）。
将三个先前创建的 样式令牌 链接到三个 TextButton 属性：
属性 样式令牌 BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - 在主面板中单击 添加属性… 并选择所需的属性。请记住，您可以输入关键字以更快地在下拉菜单中找到属性。
- 不要输入静态值，而是单击 ⋮ 按钮并选择 链接 令牌。
- 单击出现在值字段中的 $ 并选择适当的关联令牌。
将新的 TextButton 插入到您之前 创建并链接 的 ScreenGui 中，并将其 标记 为 ButtonPrimary。方便的快捷方式如下：
- 确保在 资源管理器 中选择了新的 TextButton。
- 在样式编辑器左侧列中选择 .ButtonPrimary 标签规则，然后在主面板中单击 应用 标签。您定义的样式应自动应用于按钮。
UI 修饰符
实例修饰符选择器将虚拟 UIComponents（如 UICorner 或 UIStroke）应用于进一步样式化对象。以下规则设置样式一个 TextLabel，具有自定义文本大小和圆角。
在样式编辑器的左侧列中，选择 TextLabel 在 UI Elements 分支中。
需要一个 伪实例 来配置和应用圆角到其他元素。要创建一个：
在左侧列中，将鼠标悬停在 TextLabel 上，单击 ⋮ 按钮，然后导航到 新建 ⟩ 伪实例 ⟩ UICorner。
一个新的 UICorner 伪实例出现在左侧列的 TextLabel 元素下。
选择新的 UICorner 实例后，在左侧列中将先前创建的 样式令牌 链接到 CornerRadius 属性：
- 在主面板中单击 添加属性… 并选择 CornerRadius 属性。
- 不要输入静态值，而是单击 ⋮ 按钮并选择 链接 令牌。
- 单击出现在值字段中的 $ 并选择 $Rad20 令牌。
状态规则
GuiObject 状态 选择器对应于四个 GuiState 枚举值之一，例如 Hover，让您自动配置交互状态的样式更改。以下规则设置为所有 ImageButtons 创建一个旋转 -4 度的悬停状态。
在样式编辑器的左侧列中，选择 ImageButton 在 UI Elements 分支中。
单击 ⋮ 按钮并导航到 新建 ⟩ GuiState ⟩ Hover。
一个新的 Hover 状态修饰符实例出现在左侧列的 ImageButton 元素下。
选择新的 Hover 修饰符后，在主面板中单击 添加 属性… 并选择 Rotation。请记住，您可以输入关键字以更快地在下拉菜单中找到属性。
在属性的值字段中输入 -4。
将新的 ImageButton 插入到您之前 创建并链接 的 ScreenGui 中。当您在视口中将鼠标悬停在按钮上时，它应该逆时针旋转 4 度。
样式查询
样式 查询，类似于 CSS 容器和媒体查询，允许您根据容器大小、输入类型或其他因素将条件逻辑应用于您的 UI。样式编辑器提供了一个简化的工作流程，以创建查询逻辑（条件）和结果样式作为统一集。
内置查询
一些 StyleQuery 条件非常常见，例如根据 ViewportDisplaySize 更改属性。为了简化这一点，样式编辑器包括 内置 查询，允许您创建条件规则，而无需 StyleQuery 的伪实例或真实实例；相反，您只需使用具有预定义选择器的查询规则，例如 ViewportDisplaySizeSmall。
以下步骤演示如何为 TextLabel 生成内置查询，以处理 Small、Medium 和 Large 视口大小。
自定义查询
您可以将样式查询添加到任何现有规则，以创建响应式 UI，适应其容器。以下设置配置一个 TextLabel，仅在其宽度扩展到 400 像素或更多时自动更改其外观。
在样式编辑器的左侧列中，将鼠标悬停在 TextLabel 上，单击 ⋮ 按钮，然后导航到 新建 ⟩ StyleQuery ⟩ Custom。
此操作在 TextLabel 规则下创建一个 Queries 文件夹，包含两个链接项：
- ::StyleQuery 伪实例规则，您在其中定义 条件。
- @StyleQuery 规则，您在其中定义在满足这些条件时应用的 属性。
在主面板中选择父 TextLabel 规则并定义以下默认属性：
属性 值 BackgroundColor3 $Magenta Text Default Text 在主面板中选择 ::StyleQuery 规则，单击 添加 条件…，并配置以下内容：
条件 值 MinSize 400, 0 请参阅 StyleQuery.IsActive 作为 ::StyleQuery 规则中其他可用条件的参考。
在主面板中选择 @StyleQuery 规则并设置在查询处于活动状态时应应用的属性：
属性 值 BackgroundColor3 $Gold Text Large Text
要验证查询，您可以手动调整视口中 TextLabel 的大小。
虽然手动调整大小是检查响应逻辑的快速方法，但您还可以使用 Studio 的内置仿真工具进行更精确的测试：
- 使用 设备模拟器 测试您的 UI 如何响应特定屏幕分辨率和 ViewportDisplaySize 条件。
- 使用 控制器模拟器 验证 PreferredInput 逻辑，例如在检测到游戏手柄时切换样式。
样式过渡
样式 过渡，可与 CSS 过渡 相媲美，让您在设定的持续时间内逐渐改变属性值。
默认
要以相同的参数逐渐改变许多 UI 属性，您可以设置一个默认过渡，适用于 所有 属性，除非为特定属性显式设置了其他过渡。
在 UI Elements 分支中选择 TextButton，然后在主面板中添加三个新属性，值如下：
属性 值 AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 
将鼠标悬停在父 TextButton 行上，单击 ⋮ 按钮，然后导航到 新建 ⟩ GuiState ⟩ Hover。
将新的 TextButton 插入到您之前 创建并链接 的 ScreenGui 中。当您在视口中将鼠标悬停在按钮上时，它应该逐渐变亮并逆时针旋转 5 度。
令牌链接
要在多个规则之间重用过渡行为，您可以定义表示 TweenInfo 数据类型的 令牌。以下规则设置创建一个悬停状态，以在所有 TextButtons 之间进行 -5 度旋转和更亮的背景颜色的过渡。
如果尚未创建，请创建一个名为 TokenSheet 的 令牌样式表。
在 UI Elements 分支中选择 TextButton，然后在主面板中添加三个新属性，值如下：
属性 值 AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 对于除 AutoButtonColor 之外的每个新属性，将鼠标悬停在其行上，单击 ⋮ 按钮，然后选择 插入 ⟩ 过渡。
将鼠标悬停在每个属性下的新 过渡 行上，单击 ⋮ 按钮并选择 链接 令牌。然后，不要输入静态值，而是单击出现在值字段中的 $ 并选择适当的过渡令牌。
属性过渡 过渡令牌 BackgroundColor3 $CubicOut Size $QuadInOut 
将鼠标悬停在父 TextButton 行上，单击 ⋮ 按钮，然后导航到 新建 ⟩ GuiState ⟩ Hover。
将新的 TextButton 插入到您之前 创建并链接 的 ScreenGui 中。当您在视口中将鼠标悬停在按钮上时，它应该逐渐变亮并逆时针旋转 5 度。
样式主题
样式 主题 由一组特定的令牌组成，可以进行切换，例如定义“明亮”和“黑暗”主题的颜色令牌。
主题创建
为了可扩展性，主题被组织到文件夹中。虽然单个文件夹可能足以满足大多数目的，但如果需要，您可以自由地将主题组织到“颜色”或“字体”等文件夹中。
创建一个新的主题文件夹：
- 在样式编辑器的左侧列中，将鼠标悬停在 Themes 上，单击 ⊕，然后选择 新建 主题。
- 将新 文件夹 项重命名为 General。
创建一个新的主题样式表：
- 将鼠标悬停在新 General 文件夹上，单击 ⋮ 按钮，然后选择 新建 主题 样式表。
- 将其重命名为 ThemeA。
主题令牌
一旦构建了主题，您可以将其令牌链接到各种 UI 对象属性，例如 BackgroundColor3 的 TextButton。主题表必须使用一组共同的令牌才能正常工作。
在样式编辑器的左侧列中选择 ThemeA：
将三个先前创建的 样式令牌 链接到三个新的主题令牌：
主题令牌 样式令牌 BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - 在主面板中单击 添加令牌… 并输入主题令牌的名称。
- 单击出现在值字段中的 $ 并选择关联的样式令牌。
在样式编辑器的左侧列中，选择 TextButton 在 UI Elements 分支中。
将主题的令牌链接到三个新的 TextButton 属性：
属性 主题令牌 BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - 在主面板中单击 添加属性… 并选择所需的属性。
- 不要输入静态值，而是单击 ⋮ 按钮并选择 链接 令牌。
- 单击出现在值字段中的 $ 并选择适当的主题令牌。
在链接主题的令牌时，请查找悬停提示中的 $[Token] in ThemeA，以知道令牌来自 主题 而不是来自全局令牌表（请记住，主题已经派生了全局令牌）。
主题复制
一旦您大致建立了主题，您可以 复制 它并更改各种令牌以定义独特的主题样式。
在样式编辑器的左侧列中，将鼠标悬停在 ThemeA 主题上，单击 ⋮ 按钮，然后选择 复制。
将复制的主题重命名为 ThemeB。
将主题的两个令牌链接到两个不同的样式令牌：
主题令牌 样式令牌 BackColor $Magenta ButtonTextSize $Text24 - 在属性值字段的右侧，单击 ⋮ 按钮并选择 取消链接 令牌。
- 再次单击 ⋮ 并选择 链接令牌。
- 在其值字段中，单击 $ 并选择新的关联样式令牌。
主题切换
一旦您有了 多个主题，您可以通过主题的文件夹或通过脚本（如 SetDerives() 中概述的）在它们之间切换。
在样式编辑器的左侧列中，选择 Themes 分支中的 General 文件夹。
在主面板中使用单选按钮在主题之间切换。
