Polymer：动态改变样式表

Question

我想使用 Polymer 动态应用一些样式表。场景是这样的：

<link rel="import" href="themes/red.styles.html" />
<link rel="import" href="themes/indigo.styles.html" />

<dom-module>
    <style include="indigo-styles">
    <template>
      <div class="header">Header</div>
      <button on-click="_toggleStylesheet"></button>
    </template>
</dom-module>

<script>
  Polymer({
    _toggleStylesheet: function () {
      // remove indigo-styles and apply red-styles and so on
    }
  })
</script>

有谁知道如何在 Polymer 中实现这一点？提前致谢！

Answer 1

使用this.updateStyles改变Polymer.Element的样式。

使用 Polymer.updateStyles 全局应用更改：

Polymer.updateStyles({
    '--property-one': 'var(--paper-red-900)', 
    '--property-two': 'var(--paper-indigo-500)', 
    ...
    '--property-whatever': 'etc'
})

Polymer：动态改变样式表

Polymer: Dynamically change the stylesheet

stylesheet

polymer