Question

某些Ext JS容器公开没有任何mixin的CSS变量。例如，fieldcontainer。在我的自定义主题中，我想使用fieldcontainer的可用CSS变量以不同方式设置两个fieldcontainer的样式。

我知道可以通过应用CSS来完成。有没有办法通过设置CSS变量来实现它？

例如，

    .my-class-one {
        $form-label-font-color: #FFFFFF
    }

    .my-class-two {
        $form-label-font-color: #000000
    }

有可能吗？如果可能，我在哪里放这个代码？

Answer 1

你可以这样做：

在sass / src /文件夹中定义样式：

.my-class-one .x-form-item-label{
    color: $my-class-one-label-color;
}

.my-class-two .x-form-item-label{
    color: $my-class-two-label-color;
}

...并初始化sass / var /中的变量，如下所示：

$my-class-one-label-color: #FFFFFF;
$my-class-two-label-color: #000000;

您应该将scss变量放在sass / var /文件夹中，将样式放在sass / src /文件夹中。在这两个文件夹中保留与app文件夹中相同的结构。因此，如果您在app / view / Home.js中为视图编写样式，请将样式放在sass / src / view / Home.scss文件中。

有用的链接：http://docs.sencha.com/extjs/4.2.1/#!/guide/theming

Answer 2

上面的方法应该可行，但我个人避免在内部类名称中添加样式。

另一种方法可能是为容器定义新的UI。

看看：主题指南中的Creating Custom Component UIs部分。

Ext JS 4.2自定义主题中特定容器的CSS变量

2 个答案: