如果通过 PolyGit 加载组件，如何更改聚合物中的 --primary-color 变量

Question

我正在使用 polygit 加载聚合物组件。有什么方法可以覆盖 --primary-color 而无需任何 CSS hacks？

这是我加载聚合物的方式....

<base href="http://polygit.org/polymer+v1.4/components/">
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-input/paper-textarea.html">

Answer 1

在您的自定义元素中使用它

:host{
  --primary-color:blue;
}

或者如果您在 HTML 中执行此操作，则使用 custom-style 并更新 :root 中的值以将其应用到任何地方，或在元素内部将其应用到特定元素

将其应用于所有元素

<style is="custom-style">
  :root{
     --primary-color:blue;
  }

应用于单个元素

<style is="custom-style">
  paper-card{
     --primary-color:blue;
  }

另外，如果您正在设计应用程序，我建议您创建 app-theme.html，这将是您应用程序主题的中央存储库，并使用 link 标签导入 app-theme。

请阅读聚合物的documentation for more details on styling or check out this polycast

如果通过 PolyGit 加载组件，如何更改聚合物中的 --primary-color 变量

How to change --primary-color variable in polymer if one is loading components through PolyGit

web-component

polymer

polygit