如何更改 Polymer(1.0) paper-toolbar 背景颜色？

Question

昨天我决定尝试使用 Polymer 1.0，但在尝试设计纸工具栏样式时我已经遇到了困难。

文档说可以使用以下方法更改背景颜色： --paper-toolbar-background

但是我如何在 CSS 上使用它？

我尝试了以下方法：

    paper-toolbar {
        --paper-toolbar-background: #e5e5e5;
    }

还有这个：

    paper-toolbar {
        --paper-toolbar {
            background: #e5e5e5;
        }
    }

但都没有用。正确的做法是什么？

谢谢。

Answer 1

如果您在主页上设置样式，则必须使用 <style is='custom-style'> 应用样式。这是为了使自定义 CSS 属性起作用。

申请相对容易。 paper-toolbar 提供了 2 个自定义属性和一个 mixin。 --paper-toolbar-background 是一个属性，它改变了工具栏的背景颜色，而 --paper-toolbar-color 改变了它的前景色。 --paper-toolbar 是应用于工具栏的 mixin。

使用这些属性与在元素中应用样式一样。举个例子

<style is="custom-style">
  paper-toolbar {
    --paper-toolbar-background: #00f; /* changes the background to blue*/
    --paper-toolbar-color: #0f0; /* changes the foreground color to green */
    --paper-toolbar: {
      font-size: 40px; /* Change default font size */
    }; /* Notice the semicolon here */
  }
</style>

Answer 2

直到最近我也找不到解决这个问题的方法。我有两个工具栏，我不想更改所有工具栏的 CSS，只更改 header 工具栏。

要更改每个工具栏的 CSS，请在外部 css 文件中添加以下内容：

paper-toolbar.paper-toolbar-0 {
  background: orange;
  color: red;
}

但是，这并不能解决问题。要更改基于 class 的单个纸张工具栏，如下所示：

<paper-toolbar class="header">
  ...
</paper-toolbar>

上面使用了 class 调用 "header" 所以在我的 CSS 我添加了：

paper-toolbar.header {
    background: orange;
    color: red;
}

... 成功了！好极了！这意味着你应该能够覆盖任何其他元素的任何 CSS 做同样的事情。这完全未经测试，但我认为它应该像这样工作：

<elementName>.<classname> {
  ...
}

希望这对您有所帮助！

如何更改 Polymer(1.0) paper-toolbar 背景颜色？

How to change Polymer(1.0) paper-toolbar background colour?

css

polymer