如何更改Polymer（1.0）纸工具栏背景颜色？ [英] How to change Polymer(1.0) paper-toolbar background colour?

问题描述

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

Yesterday I decided to try Polymer 1.0 and I'm already facing difficulties when trying to styling the paper-toolbar.

文档说明背景颜色可以是通过使用：
--paper-toolbar-background

The documentation says that the background colour can be changed by using: --paper-toolbar-background

但是如何在CSS上使用它？

But how can I use it on CSS?

我尝试了以下操作：

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

此外：

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

正确的方法是什么？

感谢。

推荐答案

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

If you are styling it on your main page, then you have to apply styles using <style is='custom-style'>. This is to make Custom CSS Properties work.

应用相对容易。 纸工具栏提供了2个自定义属性和一个mixin。 - paper-toolbar-background 是更改工具栏背景颜色的属性， - paper-toolbar-color 更改其前景色。 - 纸工具栏是应用于工具栏的混合。

Applying is relatively easy. paper-toolbar provides 2 custom properties and one mixin. --paper-toolbar-background is a property that changes the background color of the toolbar while --paper-toolbar-color changes its foreground color. --paper-toolbar is a mixin applied to the toolbar.

要使用这些属性在您的元素中应用样式。作为示例

To use these properties is just the same as applying styles in your elements. As an example

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

这篇关于如何更改Polymer（1.0）纸工具栏背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！