内置的 样式编辑器 是一个全面的工具，允许您通过 tokens、设计表、样式规则 和 主题 来创建、管理和应用 Roblox 游戏的UI样式。
通过 UI 选项卡访问 样式编辑器。
打开后，单击 创建设计 按钮生成基础样式集。
通过样式编辑器创建设计样式集会在 ReplicatedStorage 内的 设计 文件夹中生成一个 BaseStyleSheet。该基础表会将特定引擎级别的默认值（如 <Typography noWrap>[163, 162, 165]</Typography> 的 Color3 默认值）与Studio中的插入工作流中的默认值同步。强烈建议您 不要 删除或尝试修改基础样式表 — 而是围绕设计表构建tokens和样式规则，以匹配您的UI目标。
此外，还会在 设计 文件夹中生成一个 样式表，其中包含一个 StyleDerive 对基础样式表的继承。如果您选择删除该 StyleDerive，则 GuiObjects 的未样式值可能会变为意外值，例如默认的 Size 为 0, 0, 0, 0。
样式标记
样式 标记 是通过 StyleSheet 的 属性 定义的，表示可以在样式和组件中使用的UI属性变量。例如，Frame.BackgroundColor3、TextLabel.TextColor3 和 UIStroke.Color 可能存在一个共同的颜色。标记可以与 CSS 变量 相提并论。
虽然对于UI样式不是必需的，但强烈推荐使用标记，以便于可扩展的UI设计和样式更新。您应该开始创建以下标记，以了解它们如何与通用样式的其他方面联系在一起。
创建一个新的标记样式表：
- 在样式编辑器的左列中，悬停在 标记 上，单击 ⊕，并选择 新建 标记 样式表。
- 将新表重命名为 TokenSheet。
设计表
设计样式表聚合 样式规则 并可以链接到 DataModel 树，以将样式属性应用于UI实例。每个给定树只能应用一个 StyleSheet，尽管您可以使用 主题 在您的UI中交换相关样式，后面的指南中将介绍此概念。
通过 创建 设计 按钮创建一个名为 StyleSheet 的预填充设计表。它包含常见UI对象（如 Frame 和 TextLabel）的类规则。它还包含两个 StyleDerive 实例，从基础样式表中继承（获得） 标记 和样式，以便在您的自定义样式配置中使用。
获得设计表后，您可以设置测试 屏幕上容器 以与样式编辑器一起使用，或者如果需要，可以设置 体验内容器。
在 资源管理器 中悬停在 StarterGui 上，插入一个 ScreenGui。
样式规则
样式 规则 应用到与规则的 Selector 定义匹配的每个实例，以匹配特征，如类名、实例标记和层次关系。从高层次上看，实例匹配和通过规则的 Selector 定义进行修改的操作是通过以下方式进行的：
- 实例 标签 选择器，目标是通过 CollectionService 标记的特定UI对象。
- 根据UI对象的 Instance.Name 值选择实例名称。
类规则
样式 类 选择器目标是给定UI类的所有实例。以下规则设置样式所有的 Frames 具有统一的背景颜色和大小。
在样式编辑器的左列中，选择 Frame 在 UI Elements 分支中。
属性 样式标记 BackgroundColor3 $Magenta Size $SquareL - 在主面板中单击 添加属性… 并选择所需的属性。请注意，您可以键入关键字以更快地在下拉菜单中找到属性。
- 不输入静态值，而是单击 ⋮ 按钮并选择 链接 标记。
- 单击值字段中出现的 $ 并选择适当的关联标记。
标签规则
实例 标签 选择器目标是通过 CollectionService 标记的特定UI对象。以下规则设置样式 TextButton，其标记为 ButtonPrimary，并具有自定义背景颜色、字体和文本大小。
在样式编辑器的左列中，悬停在 样式表 上，单击 ⋮ 按钮，并导航到 新建 ⟩ 标签。
将新的标签规则重命名为 .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。
在您之前 创建并链接 的 ScreenGui 中插入一个新的 ImageButton。当您在视口中将鼠标悬停在按钮上时，它应该逆时针旋转4度。
样式查询
样式 查询，类似于 CSS 容器和媒体查询，允许您根据容器大小、输入类型或其他因素在 UI 中应用条件逻辑。样式编辑器提供了一种简化的工作流程，以创建查询逻辑（条件）以及结果样式作为统一的集合。
内置查询
一些 StyleQuery 条件非常常见，比如根据 ViewportDisplaySize 更改属性。为了简化这一点，样式编辑器包括 内置 查询，允许您创建条件规则，而不需要 StyleQuery 的伪实例或真实实例；相反，您只需使用具有预定义选择器的查询规则，如 ViewportDisplaySizeSmall。
下面的步骤演示如何生成一个 TextLabel 的内置查询，以处理 Small、Medium 和 Large 视口大小。
自定义查询
您可以将样式查询添加到任何现有规则，以创建适应其容器的响应式 UI。以下设置将配置一个 TextLabel，使其仅在扩展到 400 像素或更宽的情况下自动更改外观。
在样式编辑器的左列中，悬停在 TextLabel 上，单击 ⋮ 按钮，并导航到 新建 ⟩ StyleQuery ⟩ Custom。
此操作会在 TextLabel 规则下创建一个 查询 文件夹，包含两个链接项目：
- ::StyleQuery 伪实例规则，在此定义 条件。
- @StyleQuery 规则，在此定义当满足这些条件时应用的 属性。
在主面板中选择父 TextLabel 规则并定义以下默认属性：
属性 值 BackgroundColor3 $Magenta 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。
在您之前 创建并链接 的 ScreenGui 中插入一个新的 TextButton。当您在视口中将鼠标悬停在按钮上时，它应该逐渐变亮并同时逆时针旋转5度。
标记链接
要在多个规则之间重用过渡行为，您可以定义表示 TweenInfo 数据类型的 标记。以下规则设置创建一个悬停状态以插值所有的 TextButtons 的 -5 度旋转和更浅的背景颜色。
如果还没有，请创建一个名为 TokenSheet 的 标记样式表。
在 UI Elements 分支中选择 TextButton，然后在主面板中添加以下三个新属性：
属性 值 AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 对于每个新属性，除了 AutoButtonColor，悬停在其行上，单击 ⋮ 按钮，选择 插入 ⟩ 过渡。
在每个属性下的新 过渡 行悬停，单击 ⋮ 按钮并选择 链接 标记。然后，而不是输入静态值，单击值字段中出现的 $ 并选择适当的过渡标记。
属性过渡 过渡标记 BackgroundColor3 $CubicOut Size $QuadInOut 
悬停在父 TextButton 行上，单击 ⋮ 按钮，导航至 新建 ⟩ GuiState ⟩ Hover。
在您之前 创建并链接 的 ScreenGui 中插入一个新的 TextButton。当你将鼠标悬停在视口中的按钮上时，它应该逐渐变亮并逆时针旋转 5 度。
样式主题
样式 主题 由特定标记的集合组成，可以进行替换，例如定义“浅色”和“深色”主题的颜色标记。
创建主题
为了可扩展性，主题组织为文件夹。虽然单个文件夹通常足够，但如果需要，您可以自由地将主题组织成例如“颜色”或“字体”的文件夹。
创建一个新的主题文件夹：
- 在样式编辑器的左列中，悬停在 主题 上，单击 ⊕，选择 新建 主题。
- 将新的 文件夹 项重命名为 通用。
创建一个新的主题样式表：
- 在新创建的 通用 文件夹上悬停，单击 ⋮ 按钮，选择 新建 主题 样式表。
- 将其重命名为 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() 中进行切换。
在样式编辑器的左列中，选择 主题 分支中的 通用 文件夹。
在主面板中通过单选按钮在主题之间进行交换。
