聚合物从子级到父级的更新样式

Question

我有2个元素。第一个名为test-layout的是使用core-layout

中的样式

在测试布局中：

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

在核心布局中：

<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（父级）中的文字不会发生变化。

平板电脑尺寸

移动视图

桌面视图

有没有办法让我更新父版（测试版面）？我想将core-layout用于依赖媒体的样式，我不想将所有样式复制到每个组件

解

好的，我想我明白了。如果我从test-layout更改mixin，那么它就可以了。我想它必须从父母到孩子，而不是相反。我所做的是将_mediaChanged()移至test-layout而不是

Answer 1

Mixins和CSS变量是父＆gt;当你想要应用它们时，相关的孩子，为了更新你需要在父母中拥有api的孩子的变量，它可以对自己应用这些变化，并且它将被改变所有的孩子。

您移动_mediaChanged()方法的解决方案是有效的，因为您将变量分配移动到父元素，并且所有子元素都具有其中的值