Sencha ExtJs 7.1 自定义单个组件答案

【问题标题】：Sencha ExtJs 7.1 customize single componentSencha ExtJs 7.1 自定义单个组件
【发布时间】：2020-03-19 11:17:23
【问题描述】：

我正在尝试自定义单个组件 CSS，避免自定义所有组件。

Ext.define('MyApp.tab.Panel', {
    extend: 'Ext.tab.Panel',


    header:{
        xtype: 'myWorkspacesToolbar',
        items:[
             ....
        ]       


    },
    items:[
        ....
    ]

我只想自定义 HEADER 样式和他的子项（动态添加）而不是面板项。以 scss 文件 myWorkspacesToolbar.scss 为例：

$button-toolbar-color: #F00;

我更改了所有按钮的颜色（标题和面板项以及子项）。

使用主题混合变量我必须为标题中的单个字段设置 UI 以获得 CSS 更改。

最好的方法是什么？

【问题讨论】：

标签： extjs components themes customization extjs7

【解决方案1】：

使用extjs-button-ui mixin 来创建所需的按钮并将ui 属性设置为标题中的按钮

【讨论】：