EXTjs5 - Custom Theme Issue 1 [Tab]

Question

I'm having a lot of trouble with a few of the SASS theming components. I'll start with the one providing me the most annoyance... I've written a BUNCH of custom themes for EXTjs 4.x, and haven't had these issues, but theming 5.x is proving to be a bit buggy/different. I'm not sure if I'm just not using the proper sass variables, or what... please help!

TAB

I've extended a theme from the 'ext-theme-gray' package. I'm simply trying to change the text color of the tab title, but these sass variables don't seem to change the color properly. The 'ext-theme-gray' has a text color of #333.

I add these sass values, and build my theme: Code:

    $tab-color: #c8c8c8 !default;    
    $tab-color-active: #c8c8c8 !default;
    $tab-color-over: #c8c8c8 !default;
    $tab-color-disabled: #c8c8c8 !default;

No change to the ACTIVE tab only. For some reason, the active tab is still using the ext-theme-gray css, and overwriting my theme (screenshot below):

What am I doing wrong?!

ref: link to duplicate sencha forum post here

Answer 1

Why are you including both your theme's CSS and the ExtJS theme? Your theme will have all of the relevant CSS, based on detection by ExtJS about what classes you use.

Your style is being overridden by the more specific style in the extjs theme. If you need both (and I don't think you do), you'll need to mark your styles as !important, not !default