Even though I have border-width set to 0 and border-radius set to 0, the width and radius on the button don’t change. However, padding and margin did change to 0.
Is this a known issue?
EDIT: I added an image with 3 red boxes. The first one is, of course, Unity’s style for the button, 1 px on the border-width. Then my reset style with border-width to 0. Lastly, the width is still 1px. It should be 0.
I initially had this problem on my real project where margin and padding wasn’t overridden. That is why I created a blank project to see if I had done something wrong. Now margin and padding are overridden but border-radius isn’t.
@antoine-unity Is there a chance you could add an option somewhere to completely remove the built-in styles? I can see how they make sense for prototyping and for Editor customizations but in an actual game you always end up designing your own style for everything / most things.
Some controls are dependant on built-in styles to work. The default runtime style is a bit more minimalist than the editor one. Adding your own styles over it should allow you to completely customize the look of your ui.
@uMathieu In that case would you be able to provide a bare-minimum theme and include it in the documentation or somewhere in the source code, so that we could just copy-paste it and adjust to our needs?
What I mean as bare minimum is for example a completely flat / rectangular design, no rounded corners.
What is needed is mainly for overrides to work. In Preview 13, it’s virtually impossible to override any styles on a label unless you inline everything.
I have this too. For example: I define a global override for all buttons inside a container:
#Container Button {
background-color: #fff;
}
and then try to override this later for a specific button:
#MyButton
{
background-color: #aaa !important;
}
this doesn’t work - the parent style still survives. In this particular case, I think the button gets background from both .unity-button and #Container Button -definitions, but the local (especially when specified as “!important” should override the parent styles in any case.
This kind of overriding should work reliably and is essential for working with styles.
You can override your button like this (combining different type of selectors helps):
Button#MyButton{
background-color: #aaa;
}
I agree with you on the importance of the mighty “!important”; because otherwise it is becoming hard to override more complex situations. Selectors have importance difference like in CSS (!important > inline > #id > . class > element)(https://docs.unity3d.com/2021.2/Documentation/Manual/UIE-USS-Selectors.html see the “Determining selector precedence”, inline > #Name > .class > ElementType) and might help. It is definitely not working as same as the CSS selectors, but close enough.
Unless we are missing a piece of the puzzle this should work, if it doesn’t it’s a bug.
!important is not supported, but other than inline styles always win over selectors and the rules of selector precedence should be consistent with CSS.
It won’t (unfortunately), because “#Container Button” is more specific than “#MyButton”. I thought this is the way of the USS, but if you say it is a bug, than it is a bug
Ah, I get it. So the trick is that the more specific, the more weight it has? Is this the way it’s supposed to be or should I just get as specific as possible to get overrides?
In general CSS terms, your rules are always sorted by their selector “specificity”
I assume that Unity follows the standard approach for this. Specificity - CSS: Cascading Style Sheets | MDN
should I just get as specific as possible to get overrides?
Its a good design question, haha. You’re in numerous company with this question. If you over specify, you lose some of the supposed benefits of CSS. If you under specify, Unity’ll override your buttons, haha.
A good rule of thumb is to “just as specific as you need to be, and no more”. Thats sort of a goofy answer, but its the best you can do in abstract terms.
If you were writing all your components from scratch, and you wanted to be hip, you would probably want to do structure your styles and classes like the modern TailWind.