Css 如何在extjs中正确指定主题变量？

我一直在尝试学习extjs中的样式，但我不知道它是如何工作的。在一个非常简单的示例中，我想对面板标题应用一些样式：

app.js

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'MyPanel',
            cls: 'title',
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'button',
                text: 'myButton'
            }, {
                html: 'Hello World!!!',
            }]

        })
    }
});

.title .x-panel-header {
    background-color: pink;
    color: red;      /* this doesn't work */
    font-size: 22px; /* this doesn't work */  
}

因此，据我所知，我设法用以下css文件更改标题

背景色

：

app.css

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'MyPanel',
            cls: 'title',
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'button',
                text: 'myButton'
            }, {
                html: 'Hello World!!!',
            }]

        })
    }
});

.title .x-panel-header {
    background-color: pink;
    color: red;      /* this doesn't work */
    font-size: 22px; /* this doesn't work */  
}

问题是一些主题变量没有正确应用，例如，文本颜色或字体大小，尽管这些变量是根据面板标题的文档指定的。我错过了什么

---

几乎所有的ExtJS组件都有

样式

或

cls

属性。 手动重写extjs css类应该是最后的选择

在您的情况下，您应该查看以下组件：

组件应该有一个

config

，标题组件应该有一个

config

来定制每个部分

下面是一个工作示例：

对于您提到的sass变量

它们用于自定义ExtJS主题。所以，如果你想以triton®声波风廓线仪为基础制作你自己的主题，你可以使用这些变量来创建你自己的主题。如果要对整个主题（例如，所有Ext.panel.panel组件的背景色）进行覆盖，这非常有用

我建议您阅读本指南，了解有关此主题的更多信息：

---