Question

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

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

Answer 1

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

只需下载其中一个预制主题（或使用Polymer Theme Builder创建自己的主题）并在<head>中将其链接到此{<1}}：

<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为纸质材料/等应用默认边距/填充/等提供最佳实践。

编辑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-使用-papermaterial.html

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

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

Polymer 1.0 app-theme仅影响index.html，而不影响自定义元素

3 个答案: