Question

当我调用changeColor()时，我无法让纸张标签选择栏改变颜色。难道我做错了什么？

<dom-module id="paper-tabs-custom">
  <style>
        paper-tabs {
      --paper-tabs-selection-bar-color: white;
    }

    paper-tab {
      --paper-tab-content-unselected: {
        opacity: 1.0;
      }
    }

    paper-tab {
      font-weight: 700;
    }

    paper-tab[name="portfolio"] {
      width: 161px;
    }
  </style>
  <template>
    <paper-tabs noink="true" 
      attr-for-selected="name"
      selected="{{setSelected}}">
      <paper-tab data-name="home" data-px="240" name="home" on-tap="jumpToPage">
        HOME
      </paper-tab>
      <paper-tab data-name="portfolio" data-px="180" name="portfolio" on-tap="jumpToPage">
        PORTFOLIO
     </paper-tabs>
  </template>
  <script>
    Polymer({
      is: "paper-tabs-custom",
      changeColor: function() {
        this.customStyle['--paper-tabs-selection-bar-color'] = 'black';
        this.updateStyles();
      }
    });
  </script>
</dom-module>

Answer 1

是的，您需要直接在<paper-tabs>设置属性，并直接在其上调用updateStyles。可能只是直接在它上面调用updateStyles就可以解决问题，但我很确定这就是错误所在。

this.$.tabs.customStyle['--paper-tabs-selection-bar-color'] = 'black';
this.$.tabs.updateStyles();

使用this.customStyle，颜色不会改变

1 个答案: