ExtJS 6中的按钮背景颜色不变

Question

I know that there is many post on this subject, but even after looking at all and trying to use all the "cls" configs, the background color of my button does not change.

Here's my code:

var miscTools = Ext.create('Ext.panel.Panel', {
    title: 'Tools',
    id: 'toolsPanel',
    bodyPadding: 5,
    height: 200,
    border: false,
    collapsible: false,
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },
    items: [{
        xtype: 'button',
        id: 'colorToolButton',
        text: 'Auto color tool',
        cls: 'multiColor-btn',
        handler: colorWindow
    }]
})

CSS:

.multiColor-btn {
    background-color: yellow;
}

What am I doing wrong ?

ANSWERS

So the problem was from the gray theme of ExtJS. I needed to remove the background-image of the button in order to add a background color. Thanks to @Alexander for his answer.

Correct code:

.multiColor-btn {
    background-image: none !important;
    background-color: yellow !important;
}

Another option would have been to use a "afterRender" event to change the background color. However, it does just change the text background color. Thanks to @nenadg for this answer.

Ext.getCmp('colorToolButton').btnInnerEl.addCls('multiColor-btn')

Answer 1

Try this :

.multiColor-btn {
    background-color: yellow !important;
}

Answer 2

Instead of cls, try using userCls property for additional styles.

http://staging.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.Component-cfg-userCls