Unity UI Toolkit - Why USS Styles Get Overridden by Inline Styles

This issue can be resolved by removing inline styles.

![](

dpo-0Op8TegFrqnJLsg.dNaWQWh7mLZx5eR7GqMQbgQn6_xTce1rU7M6FMvfTU0g.PNG.cdw0424/image.png?type=w966)

As shown above, even when you change the color in USS, the button color doesn't change.

![](

pc_EQ0PU0JUNwJa6fwg.HXt79epeLynPeER6bNz5VRY1U7Wf55-zV1Efe-4bkcsg.PNG.cdw0424/image.png?type=w966)

This happens because individual elements have inline styles applied. If you look closely, a white vertical line appears next to the color picker — this indicates that an inline value is being used.

When this occurs, the USS tag gets overridden, so USS won't apply to elements using inline styles.
(This means you can't apply hover color changes, etc. via USS.)

![](

Sop1u6mwfCXBazHoQwg.7S8idkexGZl-uciD-BgTDw5LySPjEF0IeUYgtNyUi3kg.PNG.cdw0424/image.png?type=w966)

To fix this, right-click the specific inline style property and click the Unset button that appears.

After disabling the inline style with that button:

![](

EQVPoZc9Zld2KQNdQEg.EIEbmcLT6hVx3ejh5avOpKP4BI-xJ09-Rz41B3VYmHgg.PNG.cdw0424/image.png?type=w966)

You can confirm that USS is now applied correctly.

The recommended workflow is:

![](

_ no-Ug.7kdXeTNpPE53mon_Q_hhV1yzqLbxAb-Oo0_YPtxW1sUg.PNG.cdw0424/image.png?type=w966)

It's best to design using USS tag syntax only as much as possible.

For reference, the example at the bottom of the image above shows applying a .yellow:hover tag to a Label element named "foo" that's contained within a TextField.

References:

Unity - Manual: Styling individual inline elements

Unity - Manual: UI Toolkit