如果此按钮位于TitleBar上，如何更改按钮图标的颜色？

Question

我有一个深蓝色的工具栏，我需要位于TitleBar上的按钮>>> import re >>> regex = re.compile('(?i:use)\s+([A-Z0-9]+)\s+(?i:code)') >>> regex.match('Use HELLO1 code') <_sre.SRE_Match object; span=(0, 15), match='Use HELLO1 code'> >>> regex.match('use HELLO1 Code') <_sre.SRE_Match object; span=(0, 15), match='use HELLO1 Code'> 在所有其他情况下，还有其他颜色，如附图所示。

这样做的正确方法是什么？

Answer 1

由于位于标题工具栏中的按钮是特定情况，因此您应使用separate ui为此类按钮创建theme mixins。您扩展default mixin，给它一个新名称，设置所需的参数

@include extjs-button-small-ui(
    $ui: 'titlebarbutton',
    $color: #fff
);
@include extjs-button-medium-ui(
    $ui: 'titlebarbutton',
    $color: #fff
);
@include extjs-button-large-ui(
    $ui: 'titlebarbutton',
    $color: #fff
);

然后在按钮配置中使用它，如下所示：

{
    xtype: 'button',
    ui: 'titlebarbutton',
    ...
}

或

作为@ D.V。在评论中建议，您可以简单地使用css规则：

{
    xtype: 'button',
    cls: 'app-titlebar-button',
    ...
}

请注意，该按钮由多个元素组成，此类将应用于顶层，但文本的颜色由内部元素确定，类为x-btn-inner，因此您需要css规则会是这样的：

.app-titlebar-button .x-btn-inner {
    color: #fff;
}