And while the style does become applied it is later overriden by a style called:

GP34Q33HOB-com-sencha-gxt-theme-base-client-tree-TreeBaseAppearance-TreeBaseStyle-text
I tested it in Firebug and discovered if I disable
GP34Q33HOB-com-sencha-gxt-theme-base-client-tree-TreeBaseAppearance-TreeBaseStyle-text's
reference to color being black, it works correctly and inherits my class color.

What's the best way to override this style? Do I need to create a new Appearance or is there a simpler approach?
Thanks

Are you familiar with how css style rules can override one another? The basic idea is that each rule has a different 'weight', based on how specific it is, or how early it is in the document. What is probably happening is that your CSS is less specific or is declared earlier than the TreeBaseStyle.text() css.

One fix for this would be to just cheat, and append !important to the end of your style property:

Code:

.BlueGridStyle {
color: blue !important;
}

This can be difficult to maintain, for example if you have a error style that should override the blue style, you now have to be even more important.

Another fix is to make your rule more specific, based on giving it a tag name or another parent class to base the rule's selector on (like "div.BlueGridStyle" or ".ThemedGrid .BlueGridStyle").

And finally, yes, you could override the appearance and remove the color:black to allow your code to more easily take over this property - but as you are building new functionality rather than re-theming existing, I'm not sure this is the best answer.

Are you familiar with how css style rules can override one another? The basic idea is that each rule has a different 'weight', based on how specific it is, or how early it is in the document. What is probably happening is that your CSS is less specific or is declared earlier than the TreeBaseStyle.text() css.

One fix for this would be to just cheat, and append !important to the end of your style property:

Code:

.BlueGridStyle {
color: blue !important;
}

This can be difficult to maintain, for example if you have a error style that should override the blue style, you now have to be even more important.

Another fix is to make your rule more specific, based on giving it a tag name or another parent class to base the rule's selector on (like "div.BlueGridStyle" or ".ThemedGrid .BlueGridStyle").

And finally, yes, you could override the appearance and remove the color:black to allow your code to more easily take over this property - but as you are building new functionality rather than re-theming existing, I'm not sure this is the best answer.

Ok, I'm 100% sure I made this far more difficult than it needed to be but when the Important tag didn't work for me I started getting creative. If anyone else has this issue then this code sippet DOES solve it but is probably needlessly complex.