Polymer 更新样式从 child 到 parent

Question

我有两个元素。第一个叫做 test-layout 的是使用来自 core-layout

的样式

在test-layout中：

<link rel="import" href="../commons/core-layout.html">
<style include="core-layout"></style>
<div class="containerTest">Test Layout Text</div>

在core-layout中：

<style>

.containerTest{
    color: var(--color, blue);
}
</style>

<div class="containerTest">Core Layout Text</div>

<script>
_mediaChanged(e){

 if(this.mediaDetail.desktop){
        this.customStyle['--color'] = 'blue';
        this.updateStyles();
    }
    else if(this.mediaDetail.tablet){
        this.customStyle['--color'] = 'green';
        this.updateStyles();
    }
    else if(this.mediaDetail.mobile){
        this.customStyle['--color'] = 'red';
        this.updateStyles();
    }
}
</script>

_mediaChange() 正在使用 iron-media-query 通知我视图是台式机、平板电脑还是移动设备。从那里我改变字体颜色

当我调整页面大小时，core-layout 中的文本发生变化，但 test-layout (parent) 中的文本没有变化。

平板电脑尺寸

手机浏览

桌面视图

我有办法更新 parent (test-layout) 吗？我想将 core-layout 用于依赖于媒体的样式，我不想将所有样式复制到每个组件

解决方案

好的，我想我明白了。如果我从 test-layout 更改 mixin，那么它就可以工作。我想它只能从 parent 到 child 而不是相反。我所做的是将 _mediaChanged() 移动到 test-layout 而不是

Answer 1

Mixins 和 CSS 变量是 parent > children 相关的，当你想应用它们时，要从 children 更新变量你需要 api 在 parent 中，它可以将更改应用到自己身上，并且它将更改所有 children。

您移动 _mediaChanged() 方法的解决方案有效，因为您将变量赋值移动到 parent 元素，并且所有元素 children 都具有来自它的值

Polymer 更新样式从 child 到 parent

Polymer update style from child to parent

polymer-1.0