如何将样式应用于聚合物元素？

Question

我一直在尝试阅读文档，但我不明白。似乎也没有任何 Whosebug 问题。现在使用 Polymer v1.0 和 MVC 5。

例如，让我们以纸张工具栏为例。我有这个示例代码：

<paper-toolbar>
    <paper-icon-button icon="menu"></paper-icon-button>
    <span class="title">My Title</span>
    <paper-icon-button icon="refresh"></paper-icon-button>
    <paper-icon-button icon="add">+</paper-icon-button>
</paper-toolbar>

如何应用白色背景？

In the polymer website:

我看到有自定义属性和混合...但我该如何使用它们？

例如，我将如何覆盖“--paper-toolbar-background”？使背景变白？

谢谢！

Answer 1

我推荐的方法是使用一个用于样式目的的元素，例如 app-theme.html。将其放入您的元素目录并导入它。

如果你的 app-theme.html 看起来像下面这样，它应该正确地设置你的 paper-toolbar 的样式：

<style is="custom-style">
    paper-toolbar {
        --paper-toolbar-background: var(--paper-blue-900);
    }
</style>

我对 Paper 元素使用这种方法。对于自定义元素，我将样式放在每个元素中。

虽然理论上您可以在使用元素之前使用我上面的代码并粘贴它，但这种方法存在一个问题，即之前应用了默认样式，导致中断。

当然，您也可以只使用普通的 app.css 文件来设置纸张元素的样式，但这样您就必须使用 !important 属性来覆盖元素的默认样式。不过不推荐。

希望对您有所帮助。

乔治

如何将样式应用于聚合物元素？

How do I apply styling to polymer elements?

asp.net-mvc

polymer-1.0