【Unity】【UI Toolkit】USSは下に記述したものほど優先されるという話

Unity UIToolKit

UnityのUI ToolkitのUSSは下に記述したものほど優先されるという話です。

概要

UI ToolkitのUSSでは、下に記述してあるものが優先して適用されます。

例えば以下のように、USSファイルに二つのクラスに関するスタイルを記述していることを考えます。

.example-button--off
{
    background-color: dimgray;
}

.example-button--on
{
    background-color: darkslateblue;
}

あるVisualElementにこの二つの名前を両方とも適用した場合、example-button--onのスタイルが適用されます。

動作確認

この動作を確認するために、Buttonに対してexample-button--offをクラスに追加した上で、ボタンを押下するごとにexample-button--onを有効にしたり無効にしたりしてみます。
より下に記述しているexample-button--onが優先されるため、これで二つのスタイルが交互に適用されるはずです。

以下はこれを実装したEditorWindowです。

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public sealed class ExampleWindow : EditorWindow
{
    private const string ExampleButtonClassNamePrefix = "example-button";
    private const string ExampleButtonOnClassName = ExampleButtonClassNamePrefix + "--on";
    private const string ExampleButtonOffClassName = ExampleButtonClassNamePrefix + "--off";
    [SerializeField] private StyleSheet _styleSheet;

    private void OnEnable()
    {
        rootVisualElement.styleSheets.Add(_styleSheet);

        var button = new Button();
        button.text = "Example Button";
        button.AddToClassList(ExampleButtonOffClassName);
        rootVisualElement.Add(button);

        // example-button--onを有効にしたり無効にしたりする
        // ToggleInClassListの代わりにEnableInClassListを使ってもいい
        button.clicked += () => button.ToggleInClassList(ExampleButtonOnClassName);
    }

    [MenuItem("Window/Example")]
    private static void Open()
    {
        GetWindow<ExampleWindow>();
    }
}

このスクリプトのInspectorからStyleSheetフィールドに前節のUSSファイルをアサインし、Window > Exampleからこのウィンドウを開きます。

ボタンを押下するたびにスタイルが変わることを確認できます。

動作確認