最少代码：HelloWorld.html源文件下载 

https://docs.sencha.com/extjs/6.7.0/classic/Ext.button.Button.html

setStyle

<link  rel="stylesheet" href="theme-gray-all.css">
<script src="ext-all.js"></script>   
<script>Ext.onReady(function () { /*---------------------------------------------------------------------------------*/

     Ext.create('Ext.panel.Panel', { 
            renderTo: 'helloWorldPanel',
            height: 200,
            width: 600,
            title: 'Hello world',
            
                items: [{ xtype  : 'button',text: '测试1'  
                       //  ,style:{ color:'blue'  }  // 会被  theme-gray-all.css 覆盖掉，去 掉theme-gray-all.css，就有用
                         ,handler: function() {Ext.get( 'helloWorldPanel').setStyle({"background-color":'blue'});}
                           }
                 ]

      });

}); </script><!------------------------------------------------------------------------------------------------------->

<div id="helloWorldPanel" />  <!--调用-->

因为字体大小，颜色 CSS嵌套太深，直接修改不太会有效果

<!- 这里注释掉了 --<link  rel="stylesheet" href="theme-gray-all.css">-->
<script src="ext-all.js"></script>   
<script>Ext.onReady(function () { /*---------------------------------------------------------------------------------*/

     Ext.create('Ext.panel.Panel', { 
            renderTo: 'helloWorldPanel',
            height: 200,
            width: 600,
            title: 'Hello world',
            
                items: [{ xtype  : 'button',text: '测试2'  
                         ,style:{ color:'red'  }  // 会被  theme-gray-all.css 覆盖掉，去 掉theme-gray-all.css，就有用
                         ,handler: function() {Ext.get( 'helloWorldPanel').setStyle({"background-color":'blue'});}
                           }
                 ]

      });

}); </script><!------------------------------------------------------------------------------------------------------->

<div id="helloWorldPanel" />  <!--调用-->

 cls加外部CSS修改，因为ExtJS的CSS嵌套太深，要引入CLS机制修改

<link  rel="stylesheet" href="theme-gray-all.css">
<link  rel="stylesheet" href="aa.css">    //自定义CSS
<script src="ext-all.js"></script>   
<script>Ext.onReady(function () { /*---------------------------------------------------------------------------------*/

     Ext.create('Ext.panel.Panel', { 
            renderTo: 'helloWorldPanel',
            height: 200,
            width: 600,
            title: 'Hello world',

            header:{ cls:'x-panel-header-new' },//关键代码

            
                items: [{ xtype  : 'button'
                            ,text: '测试1'  
   , cls: 'bntAdd'     //在aa.css里的.bntAdd  等价于 
 // ,style: { border: '2px solid red',background: '#4ca5ff' }
 //                        ,style:{ color:'blue'  }  // 会被  theme-gray-all.css 覆盖掉，去 掉theme-gray-all.css，就有用
                         ,handler: function() {Ext.get( 'helloWorldPanel').setStyle({"background-color":'blue'});}
                           }
                 ]

      });

}); </script><!------------------------------------------------------------------------------------------------------->

<div id="helloWorldPanel" />  <!--调用-->

aa.css

.bntAdd
{
   border: 2px solid red;
   background:#4ca5ff; 
   color:#58b3e8;   /*  button的字体颜色, 直接修改无效 */
}


.x-panel-header-new .x-panel-header-title-default {
     color:#58b3e8;      /*  panel header 的字体颜色 */
     background:#4ca54c; /*  panel header 的背景颜色 */
}