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

Question

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

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

Answer 1

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

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

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

或者，查看样式在该站点上的应用方式。

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

Answer 2

我遇到了同样的问题，以下方法对我有用。在你的 dom-module 添加：

<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>

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

Answer 3

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

<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 引入最佳实践，为 paper-material/etc 应用默认值 margins/paddings/etc。

编辑 7 月 2 日

未应用以下内容。

应用-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;
 };
}

我的客户元素使用-papermaterial.html

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

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

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

Polymer 1.0 app-theme only affecting index.html and not on custom elements

css

polymer