1

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

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

例如，

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

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

可能吗？如果可能的话，我把这段代码放在哪里？

4

2 回答 2

0

尽管我个人避免向内部类名添加样式，但上述方法应该有效。

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

看看： 主题指南中的创建自定义组件 UI部分。

于 2013-11-14T03:26:58.627 回答
0

你可以这样做：

在 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

于 2013-11-13T09:15:36.873 回答