How to use the <style>-element in UXML to reference a USS-stylesheet

Unity Engine
1

Hi all,

I am currently making a toolbar in UIElements. I based my work on the [UIElements: First Steps] tutorial.
Using rootVisualElement.styleSheets.Add(), I can apply styles from a USS file to the root visual element:

private void OnEnable()
{
    VisualElement root = rootVisualElement;
    root.styleSheets.Add(Resources.Load<StyleSheet>("ToolbarStyle"));
    VisualTreeAsset toolbarVisualTree = Resources.Load<VisualTreeAsset>("Toolbar");
    toolbarVisualTree.CloneTree(root);

    var toolButtons = root.Query<Button>();
    toolButtons.ForEach(SetupButton);
}

Rather, I would prefer to use a element inside the Toolbar.uxml file to set the style, as explained [here] (see: Adding styles to UXML).

My Toolbar.uxml:

<UXML xmlns="UnityEngine.UIElements">
  <Template path="Assets/Editor/Resources/ButtonTemplate.uxml" name="button-template" />
  <VisualElement class="toolbar">
    <Style src="ToolbarStyle.uss" />
    <VisualElement class="buttons-container">
      <Instance template="button-template" name="cube" />
      <Instance template="button-template" name="sphere" />
      <Instance template="button-template" name="capsule" />
      <Instance template="button-template" name="cylinder" />
      <Instance template="button-template" name="plane" />
    </VisualElement>
  </VisualElement>
</UXML>

My ToolBarStyle.uss: (in the same folder as Toolbar.uxml

.buttons-container {
    flex-direction: row;
    flex-wrap: wrap;
}

.toolbar-button {
    width: 30px;
    height: 30px;
    align-items: flex-start;
    justify-content: center;
}

.toolbar-button-icon {
    height: 20px;
    width: 20px;
}

With this setup, I only get the style from the uss file applied using root.styleSheets.Add(). When I comment out this part from the c# code and use the script element in UXML instead, it does not work. The console shows this warning:

“Assets/Editor/Resources/Toolbar.uxml (4,6): Semantic - USS in ‘style’ attribute is invalid: ”

How should I use the style element in UXML?

2

Hi, I tried applying the same tutorial and changed the USS to be specified in UXML instead of CSS, and all worked great. The error message you have mentions 'style` attribute. Can you double-check it’s <Style … /> instead of <style … /> as the latter is not recognized.

3

I looked into this again. It seemed that I was reading the manual for 2020.1. In 2019.2 the style element has to be given a “path” attribute (value: absolute path to uss file from project root) attribute rather than a “src” attribute.

1 Like
4

Yes, and my test was on 2020.1 too… so, yeah :roll_eyes:

5

To confirm, in 2019.3 and newer versions of Unity, the <Style> tag should use the src= attribute, not the path= attribute.

6

I kind of have the same question, still. It seems to work loading the style sheet via UXML, but I still get an IDE warning in Visual Studio:

5421366--551241--upload_2020-1-29_18-2-34.png

The warning says: invalid child element “Style”.

Checked in Unity 2019.3.0f6.

7

This is a bug in the xml schema generation, thanks for reporting.

1 Like
8

Was that ever tracked and fixed? I’m seeing the same thing under 2019.4.10

6335433--703341--upload_2020-9-21_22-57-5.png

9

This was fixed in 2020.1. Unfortunately, it’s highly unlikely this will be backported to 19.4

10

Fair enough. As long as it’s just a harmless warning, that’s fine.