Question

我正在开发一个使用聚合物的应用程序，因为我有一个名为共享样式的文件，如下所示：

<link rel="import" href="../bower_components/polymer/polymer.html">

<!-- shared styles for all views -->
<dom-module id="shared-styles">
<template>
<style>

 :host {
    --app-primary-color: red;
    --app-secondary-color: black;
    display: block;
    }

  .card {
    margin: 24px;
    padding: 16px;
    color: #757575;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  }

  h1 {
    margin: 16px 0;
    color: #212121;
    font-size: 22px;
  }
  img{
      width: 35px;
      height: 35px;
  }
</style>

我正在做的是我在我的应用程序中使用相同的颜色 - app-primary-color：red 我想要做的是我想要改变一些颜色值页面，以便更改的颜色反映在整个应用程序。

<link rel="import" href="shared-styles.html">
<dom-module id="my-view">
<template>
<style include="shared-styles">

footer {
    position: fixed;
    background: var(--app-primary-color);
    width: 100%;
    padding: 15px;
    bottom: 0;
    left: 0;
  }
</style>
<paper-button noink  on-tap="_changeColor" >change color</paper-button>

<script>
Polymer({
  is: 'my-view7',
      _changeColor: function(){
      var myElement = document.querySelector("#host");
      myElement.style.--app-primary-color = "blue";
    }
    });

如何让它发挥作用？

Answer 1

我认为这不可能来自共享风格。

但是，父元素中定义的自定义CSS属性可由其子元素访问。由于您有my-view元素，因此您可能还有父my-app元素。您可以在--app-primary-color的{{1}}选择器中移动--app-secondary-color和my-app。

聚合物改变app颜色

1 个答案: