Question

我有一个动态的Polymer 2.0应用程序，但它似乎不适用于@apply。

我有CSS变量和mixins：

<custom-style>
    <style>
        html {
            --content-background-colour: #fff;
            --content-foreground-colour: var(--paper-grey-700);

            --content-mixin: {
                background-color: var(--content-background-colour);
                color: var(--content-foreground-colour);
            }
        }

        .content-one {
            background-color: var(--content-background-colour);
            color: var(--content-foreground-colour);
        }

        .content-two {
            @apply --content-mixin
        }
    </style>
</custom-style>

然后我有用户可以选择和应用的主题：

const theme = {
    "--content-background-colour": "var(--paper-grey-800)",
    "--content-foreground-colour": "var(--paper-grey-100)"
};

Polymer.updateStyles(theme);

问题是只有直接变量更新，用@apply设置的那些不会。 class="content-one"有效，类class="content-two"失败。

我做错了什么以及如何动态更改mixins的样式？

Answer 1

聚合物似乎仍然使用相同的polyfill用于1.x中使用的变量和mixin，这意味着动态样式更新应仅限于变量，不应该用于mixin。

实现动态样式的一种方法是添加和删除类。

将Polymer.updateStyles与@apply mixin一起使用

1 个答案: