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

Question

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

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

<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程序主题的中央存储库并导入app-themeusinglink标签。

请阅读聚合物的文档以获取有关样式的更多详细信息或查看此polycast