Version: 2022.1
Runtime UI vs Editor Extension Authoring
Structuring UI

Inline styles vs style sheets

Style information for an element in UI(User Interface) Allows a user to interact with your application. Unity currently supports three UI systems. More info
See in Glossary
Toolkit can come from three different places:

  1. C# inline style properties set directly in C#. These properties override any same property coming from any other source.
  2. UXML inline style properties on the element itself, stored directly inside UXML, using the special style attribute. These properties override any same property coming from style sheets.
  3. StyleSheet style properties coming from a StyleSheet (.uss) asset and applied to an element because the element matches a USS Selector (which is like a search query).

Similar to CSS, style sheets allow sharing of styles across UI elements, UI panels, and screens. They also allow quick refactoring and changing of styles across an entire application from a central location, like themes. It’s encouraged to keep styling in style sheets as much as possible, instead of styles on each individual element.

In UI Builder, you can start by creating elements and using inline styles only to experiment while the number of elements is still small. As you build more complex UI, it’s easier to manage styles using style sheets. You can use the Extract Inline Styles to New Class in the StyleSheet section of the InspectorA Unity window that displays information about the currently selected GameObject, asset or project settings, allowing you to inspect and edit the values. More info
See in Glossary
to extract inline styles on an element to a StyleSheet.

Style sheets also have features that aren’t possible to use with inline styles, like:

  1. Pseudo states like :hover, which will apply some style properties to an element when you hover over it with the mouse.
  2. Styling of elements inside a read-only hierarchy inside a Template Instance (instance of another UI Document (UXML)) or custom C# element that creates an internal hierarchy. You can style elements with style sheets using hierarchical USS Selectors, like the following:
   .parentElement > .childElement

For more information on style sheets, see Unity style sheets.

Runtime UI vs Editor Extension Authoring
Structuring UI
Copyright © 2020 Unity Technologies
优美缔软件(上海)有限公司 版权所有
"Unity"、Unity 徽标及其他 Unity 商标是 Unity Technologies 或其附属机构在美国及其他地区的商标或注册商标。其他名称或品牌是其各自所有者的商标。