How to include multiple stylesheets into a custom inspector?

Hi everyone,

Since between Unity 2021 and 2022 some fields like Vector3Field, IntegerField, FloatField, EnumField and many others have been moved from UnityEditor to UnityEngine namespace, it is not really possible to use UI Document between those two versions. (if there is a way, I would be very happy to know it).

So, I am writting everything through code to create and add visual elements to my custom inspector. It is a big mess but at least, it works. The only problem remaining is the use of stylesheets.

I am using multiple stylesheets to keep it organized but since it is not possible to serialize an array in a custom inspector script like we do for VisualTreeDocument, it means that I have to add each stylesheet one by one?

The following is not possible:

[CustomEditor(typeof(MyClass))]
public class MyClassEditor : Editor {

    //[SerializeField] VisualTreeAsset document;
    [SerializeField] StyleSheet[] styleSheets;

    VisualElement root;

    public override VisualElement CreateInspectorGUI()
    {
        //root = document.CloneTree();
        root = new VisualElement();
        foreach (var styleSheet in styleSheets)
            root.styleSheets.Add(styleSheet);

        return root;
    }
}

Possible solution but not very efficient with big projects:

[CustomEditor(typeof(MyClass))]
public class MyClassEditor : Editor {

    //[SerializeField] VisualTreeAsset document;
    [SerializeField] StyleSheet main;
    [SerializeField] StyleSheet second;
    [SerializeField] StyleSheet third;
    // and so on

    VisualElement root;

    public override VisualElement CreateInspectorGUI()
    {
        //root = document.CloneTree();
        root = new VisualElement();
        root.styleSheets.Add(main);
        root.styleSheets.Add(second);
        root.styleSheets.Add(third);
        // and so on

        return root;
    }
}

Is there another way of doing it?

You could just define your own scriptable object type that encapsulates multiple style sheets and reference that instead.

I guess I could but I was looking for a “better solution” than create a new scriptable object to list all of my uss and add them all to my custom editor whereas I don’t need all them but only some.

Then just… make multiple instance of this encapsulating scriptable object and have them reference only the style sheets they require for a given editor.

You don’t need to just make one and list every single style sheet in them. Not sure how you got that out of my post.

Maybe you can use separate tss/uss files? For example:

Unity_2021_Main.tss:

@import url("DefaultTheme.tss");
@import url("Unity_2021.tss");
@import url("MyMainTheme.tss");
@import url("Modules.tss");

Unity_2022_Main.tss:

@import url("DefaultTheme.tss");
@import url("Unity_2022.tss");
@import url("MyMainTheme.tss");
@import url("Modules.tss");

And then just use one stylesheet in code, Unity_2021_Main or Unity_2022_Main? uss files also supports “import url” btw (https://docs.unity3d.com/Manual/UIE-tss.html , I really don’t know why Unity has two different stylesheet files =/)

It was not from your post, it was from my head. I was just thinking to a way of having only one scriptable object for everything since I would like to keep it simple instead of dealing with multiple ones.

I guess it seems to be a good idea! I gonna try this and see. If I could have only one uss to regroup all the others and load it easily in my custom inspector, that could be a solution.

1 Like