Bug UIToolkit - Theme style sheet can not overwrite Button attributes for border and background

Hi. The picture tries to explain it all.

Desired result:
The "Button" should be styled exactly the same as the "Label".

Actual result:
The "Button" does not apply background or border styling.



Brand new project using 2021.3.10f1

UI:
*created gameObject and attached UI Document
*created "Panel settings asset"
*attached "Panel settings asset"
*attached source asset

Panel Settings:
* default

Default Runtime Theme File:
*left "inherited themes" as its default
*added a uss file called "milk" to "style sheets" list

Milk.uss: - (The theme)
*as per picture

Main.uxml:
*as per picture

 

Wish it was possible to use "Dark Editor Theme" at runtime in the game view.
and to be able to use "Dark Editor Theme" as a "Inherited Themes" in the .tss

 

I also run into this issue, tested using unity 2021.3.11f1 and 2022.1.17f

The difference is my text doesn't show up at all (changed to red just for demonstration)

the border radius works as well as my scale animation on hover but background/border-color and text is broken



I have tried this with and without adding my USS files under "style sheets" it makes no difference. The buttons are always white in the game view. And I triple checked this is the TSS that my active panel settings is using



And the debugger only adds to the confusion because it seems like it should be correct

 

You can't override the default styles with using type selectors, because default styles using classes (or ids/names) to override. We don't have !important and the Button.unity-button{} has more precedence than Button{} (https://docs.unity.cn/Manual/UIE-USS-Selectors.html). I think it is really tiring to use and override default styles, and it shouldn't be that way; but don't think Unity will change this behaviour. It is not like in web browsers, where you can easily override default styles. I am usually using my own theme file, and just copying the needed default styles (especially for ScrollView, etc) from Unity's stylesheet to my own.

If you need to override while using default stylesheet, then you should add your own class name to your visual elements. Button.my-button{}, Label.my-label{}, etc.

 

I have 50+ UXML files, some have buttons some have sliders some have scroll views etc.
Does it mean I need to open up every single UXML I have and go give them ClassNames just so that I can globally style them? or do I only need to do that for "Button".?

Surely the Theme style sheet is more powerful and I am simply misusing it???
I just want one theme file that will set simple styling globally. (like border radius, or how green everything is during the Christmas Period)

Are you saying that I should not have added the default theme at all? I thought it forced me to use the default and then add on my own bellow it?

 

You can also use Button.unity-button{} (or select Labels, etc with Unity class names; but sometimes you might need to select more specifically, like Button.unity-text-element.unity-button{}), but I'd recommend using your own classes. I am more comfortable without default themes; but I am not recommending this =') I am used to create framework-like style sheets in years, so Unity's default styles are mostly annoys me.

If your UXML files are already written, the easiest solution is using Button.unity-button{} like selectors for you. By the way, I am really not sure if "Button{} selector is not capable of overriding all default styling" is intended (maybe at least TSS files should do that? But it doesn't right now); I just embraced that because UI Toolkit bugs are mostly solved slowly =')

 

... I don't understand why that worked, `.unity-text-element.unity-button`
It would be better to expose the default .uss file