內建的 樣式編輯器 是一個全面的工具，允許您通過 標記、設計表、樣式規則 和 主題 的組合來為 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 定義進行實例匹配和修改的操作如下：
- 實例 標籤 選擇器，針對通過 CollectionService 標記的特定 UI 對象。
- 根據 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 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。
在您之前 創建並鏈接 的 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 度。
樣式主題
樣式 主題 由一組特定的標記組成，可以進行切換，例如定義 "淺色" 和 "深色" 主題的顏色標記。
主題創建
為了擴展性，主題被組織到文件夾中。雖然單個文件夾可能足以滿足大多數目的，但如果需要，您可以自由地將主題組織到 "顏色" 或 "字體" 等文件夾中。
創建一個新的主題文件夾：
- 在樣式編輯器的左側列中，將鼠標懸停在 主題 上，單擊 ⊕，然後選擇 新建 主題。
- 將新的 文件夾 項目重命名為 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() 中所述）在它們之間切換。
在樣式編輯器的左側列中，選擇 主題 分支中的 General 文件夾。
在主面板中，使用單選按鈕在主題之間切換。
