內建的 樣式編輯器 是一個全面的工具，讓您可以通過 標記、設計表、樣式規則 和 主題 的組合為 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 設計和隨時間進行樣式更新時使用標記。您應該開始創建以下標記，以理解它們與通用樣式的其他方面之間的聯繫。
創建一個新的標記樣式表：
- 在樣式編輯器的左側列中，將鼠標懸停在 標記 上，單擊 ⊕，然後選擇 新建標記樣式表。
- 將新的樣式表重命名為 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 - 在主面板中單擊 添加屬性… 並選擇所需的屬性。記住，您可以輸入關鍵字來更快地在下拉菜單中找到屬性。
- 不要輸入靜態值，單擊 ⋮ 按鈕並選擇 鏈接標記。
- 單擊出現在值字段中的 $，然後選擇正確的關聯標記。
在您之前 創建並鏈接 的 ScreenGui 中插入一個新的 TextButton，並將其 標記 為 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 規則下創建一個 Queries 資料夾，其中包含兩個鏈接項目：
- ::StyleQuery 假實例規則，您可以在此定義 條件。
- @StyleQuery 規則，您可以在此定義當滿足這些條件之後要應用的 屬性。
選擇主面板中的父 TextLabel 規則，並定義以下默認屬性：
屬性 值 BackgroundColor3 $Magenta Text 默認文字 選擇 ::StyleQuery 規則，在主面板中單擊 添加一個條件…，並配置以下內容：
條件 值 MinSize 400, 0 請參考 StyleQuery.IsActive 用於可用的其他條件，用於 ::StyleQuery 規則。
選擇 @StyleQuery 規則並設置當查詢在活動狀態時應應用的屬性：
屬性 值 BackgroundColor3 $Gold 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] 在 ThemeA，以知道該標記來自 主題，而不是來自全域標記表（請記住，主題已經派生全域標記）。
主題複製
一旦您基本建立了主題，則可以 複製 它並更改不同的標記以定義獨特的主題樣式。
在樣式編輯器的左側列中，將鼠標懸停在 ThemeA 主題上，單擊 ⋮ 按鈕，然後選擇 複製。
將複製的主題重命名為 ThemeB。
將主題的兩個標記鏈接到兩個不同的樣式標記：
主題標記 樣式標記 BackColor $Magenta ButtonTextSize $Text24 - 在屬性值字段的右側單擊 ⋮ 按鈕並選擇 取消鏈接標記。
- 再次單擊 ⋮ 並選擇 鏈接標記。
- 在其值字段中單擊 $ 並選擇新的關聯樣式標記。
主題交換
一旦您擁有 多個主題，可以通過主題的資料夾或通過腳本，如 SetDerives() 來進行交換。
在樣式編輯器的左側列中，選擇 主題 分支中的 一般 資料夾。
在主面板中使用單選按鈕在主題之間進行交換。
