Unity UI Toolkit: DropdownField styling

Question

I'm in the process of implementing a form view with Unity's new-ish UI toolkit, and styling my own stuff is simple, using the UI builder. No biggie.

When it comes to Unity's pre-built "Controls", styling in the UI builder is very limited. I can set some styles on the outermost parent, but the inner controls, I cannot mess with.

I can, however, see what classes those components use, and I can override their rules by simply editing the USS file by hand. Not sure why this restriction is there, but so be it.

With the DropdownField, however, I can style the input and the arrow, etc. without much trouble, but I cannot find the class for the actual dropdown panel, and I'd like to be able to fix the color, font, size, etc. of that as well, so it looks less bad

Looking in the source for the DropdownField, I can pick up some class names that I couldn't see in the UI builder, but even when spamming CSS rules at them, I don't seem to hit the right ones

from DropdownField.cs

internal static readonly string ussClassNameBasePopupField = "unity-base-popup-field";
internal static readonly string textUssClassNameBasePopupField = DropdownField.ussClassNameBasePopupField + "__text";
internal static readonly string arrowUssClassNameBasePopupField = DropdownField.ussClassNameBasePopupField + "__arrow";
internal static readonly string labelUssClassNameBasePopupField = DropdownField.ussClassNameBasePopupField + "__label";
internal static readonly string inputUssClassNameBasePopupField = DropdownField.ussClassNameBasePopupField + "__input";
internal static readonly string ussClassNamePopupField = "unity-popup-field";
internal static readonly string labelUssClassNamePopupField = DropdownField.ussClassNamePopupField + "__label";
internal static readonly string inputUssClassNamePopupField = DropdownField.ussClassNamePopupField + "__input";

from my USS file

.unity-base-popup-field {
    font-size: 42px;
}
.unity-base-popup-field__text {
    font-size: 42px;
}
.unity-base-popup-field__input {
    font-size: 42px;
}
.unity-base-popup-field__label {
    font-size: 42px;
}

.unity-popup-field {
    font-size: 42px;
}
.unity-popup-field__text {
    font-size: 42px;
}
.unity-popup-field__input {
    font-size: 42px;
}
.unity-popup-field__label {
    font-size: 42px;
}

I'm not really sure how to progress from here... Any help finding what I'm looking for? Or should I go about it in a different way?

EDIT: I forgot for a second that this is stack overflow, and we'll be beheaded for minor offenses, so I took out some helpful screenshots and copied in some codeblocks instead /shrug

Answer 1

I had the same problem and but to complete your solution, I have to add ".unity-base-dropdown__item{ ....} to my css

Answer 2

Managed to answer my problems myself after a lot of digging. Full discussion here

Disclaimer for the angry SO-Meta editors who likes to close everything instead of being helpful: I've attached photos to the answer. Very sorry, but this is the most illustrative way to explain how things are wired together. There is no code involved in the answer. Just editor references.

I looked in the UI debugger and I could see that the DropdownField drawer was instantiated as a global element in the hierarchy, and not a child of any of my UXML documents. All of my UXML docs reference a shared Menu.uss file for styles, but since this drawer becomes a root component, it doesn't read from my USS at all. The UI debugger confirmed as much.

My UXML:

The dropdown drawer:

So after some back and forth on the forums I went digging, and found the fix.

The UI Document component that renders the UI at runtime has panel settings:

The panel settings has a Theme Stylesheet:

Make a copy of the default stylesheet and reference you copy instead. Then add in your stylesheet there, which will make sure that every single element picks up the styles:

Now everything works as expected: