如何更改Polymer(1.0)纸张工具栏背景颜色？

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.

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

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

但是,这并没有解决问题.要根据以下类更改单个纸张工具栏:

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

上面使用了名为"header"的类,所以在我的CSS中我添加了:

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

......它工作了!好极了!这意味着你应该能够覆盖执行相同操作的任何其他元素的任何CSS.这是完全未经测试的,但我认为它应该像:

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

希望这一切都有帮助!