When you create new style declarations add !important after each css property:

.custom {
font-size: 12px !important;
}

Then in in your ext component add 'custom' to your 'cls' config property.

then the .custom class will be appended to the rest of the component css classes.. !important is needed because the css property font-size is most likely defined in the other css declaration (x-button in your example) and this tells the browser that this is what you want to take over any other declarations. In other words it increases the weight of your declaration.

I have the same problem, I want to change the font-size, the background and the line-height for a specified titlebar. I set a baseCls for the titlebar, the background color works but the line-height and font-size are override by x-title class. So how can I do this? I don't want to change the x-title class...

Harder than it looks

I too am having trouble changing e.g. the font colour, background, padding etc. of a button. The built in sencha css usually takes precedence. I am using the cls property. Not having much luck with adding !important.

Short of creating a new theme, are there any proper tutorials and tips on how to apply custom styles to e.g. buttons without constantly colliding with sencha styles and never quite knowing what is going to work?

Also I am getting effects where Sencha Architect might display some css changes correctly but an actual browser doesn't.