Polymer 1.0 应用程序主题仅影响 index.html 而不会影响自定义元素答案

【问题标题】：Polymer 1.0 app-theme only affecting index.html and not on custom elementsPolymer 1.0 应用程序主题仅影响 index.html 而不会影响自定义元素
【发布时间】：2015-07-02 17:04:28
【问题描述】：

我正在使用 Polymer Starter Kit，我想将脚手架移动到它自己的元素 <main-scaffold> 中。 app-theme.html 中有一些样式在我将它从 index.html 移到它自己的元素之前应用于它，但现在没有任何样式适用。对于我放入自己的自定义元素中的任何元素集都是如此。从app-theme.html 应用于<paper-material> 的自定义样式不会应用在我的<home-page> 元素中。我希望某些元素在全球范围内应用主题。 app-theme.html 中唯一适用于其他任何地方的样式是 CSS 自定义属性，例如 --dark-primary-color。

有什么方法可以创建适用于整个项目的主题？我已经尝试专门将 app-theme.html 导入到我的元素中，但这并没有什么不同。提前致谢。

【问题讨论】：

标签： css polymer

【解决方案1】：

polymerthemes.com 的主题应该适用于您的整个项目。

只需下载一个预制主题（或使用Polymer Theme Builder 创建您自己的主题）并在您的<head> 中像这样链接到它：

<style is="custom-style">
    @import url("path/to/theme.css");
</style>

或者，看看样式是如何应用到该网站上的。

免责声明：我是 polymerthemes.com 的创建者之一。

【讨论】：

仅供参考，更好的 theme installation instructions 现在已为 polymerthemes.com 上的所有主题添加。阅读一下，它们应该能让您更好地了解基于 Polymer 的项目的主题选项。

【解决方案2】：

我遇到了同样的问题，以下对我有用。在你的 dom 模块中添加：

<link rel="import" type="css" href="../styles/app-theme.css">

例如：

<dom-module id="my-element">
  <link rel="import" type="css" href="../styles/app-theme.css">
  <template>
    <paper-button raised class="primary">Click Me!</paper-button>
  </template>
</dom-module>

这似乎只需要某些纸张元素。没有它，纸张复选框也可以工作。但可以肯定的是，这不是一个理想的解决方案。

【讨论】：

主题样式由 Polymer Starter Kit 中的 html 文件 (app-theme.html) 提供。您是否复制了内容并创建了 app-theme.css ？
@Kenji 不，我认为他们提供了 css 下载的替代链接，但我现在找不到。

【解决方案3】：

发现在我的自定义元素中添加以下内容会导致 gulpfile.js 中的 vulcanize 任务崩溃（使其余任务无法运行）。

<link rel="import" href="/styles/app-theme.html">

使用相对路径解决了这个问题

<link rel="import" href="../../../../styles/app-theme.html">

以某种方式工作，但我认为这不是正确的做法。 app-theme.html 包含许多我的自定义元素不需要的 css 代码。使用 mixins ( @apply(--mixin-name); ) 看起来是个好方法，但还没有尝试过。我认为无论如何都需要修改 app-theme.html。

我希望 Polymer Starter Kit 引入一种最佳实践，为纸张材料/等应用默认边距/填充/等。

编辑 7 月 2 日

未应用以下内容。

app-theme.html

:root {
…
--app-paper-material-theme: {
   border-radius: 2px;
   height: 100%;
   padding: 16px 0 16px 0;
   width: calc(98.66% - 16px);
   margin: 16px auto;
   background: white;
 };
}

my-customelement-using-papermaterial.html

<style>
paper-material {
  @apply(--app-paper-material-theme);
}
</style>

我的研究在这几个小时内搞砸了并发布了错误的结果，所以我决定删除这些部分。对于那些看到他们并采取某种行动的人，我们深表歉意。

【讨论】：