使用聚合物css变量

Question

我无法理解如何使用聚合物的自定义css变量.目前我正在制作一个"铁叠加行为"的叠加层.

这包括定义了各种css变量的"iron-overlay-backdrop"元素.我感兴趣的主要是--iron-overlay-backdrop-opacity.

我可以通过添加在我的主index.html文件中使用它们

  <style is="custom-style">
    :root {
      --iron-overlay-backdrop-opacity: 0.4;
    }
 </style>

但我不想在那里定义样式!我想在我的自定义overlay元素中定义它们.

如何在我的自定义元素中使用这些？

我试过像这样使用它们

<dom-module id="faq-overlay">

<style>

:host {
  --iron-overlay-backdrop-opacity: 0.3;
  --iron-overlay-backdrop-background-color: red;
}
...

但这不起作用.有没有办法做到这一点？

Answer 1

我相信你要找的是:(在你的主题文件中)

<style is="custom-style">
  :root {
    --iron-overlay-backdrop-opacity: 0.7;
    --background-r: 0;
    --background-g: 0;
    --background-b: 255;
    --background-color: blue;
    --iron-overlay-backdrop-background-color: rgba(var(--background-r),var(--background-g),var(--background-b),var(--iron-overlay-backdrop-opacity));
  }
 </style>

并在您的自定义元素中

<style is="custom-style">
    :host paper-material.custom {
       background-color: var(--iron-overlay-backdrop-background-color);
    }
</style>