如何从主样式表中设置 Polymer 元素的样式？

Question

我在一个项目中使用 <paper-progress-button>，我想从我的主样式表中设置它的样式，但无法让它工作。

<paper-progress-button> 的样式代码如下所示：

<dom-module id="paper-progress-button">

    <template>
        <style>
            :host {
                display: inline-block;
            }

            .button {
                @apply --paper-progress-button-button;
            }

            .button:not([disabled]) {
                @apply --paper-progress-button-button-active;
            }

            .spinner {
                margin-left: 10px;
                @apply --paper-progress-button-spinner;
            }

            [hidden] {
                display: none;
            }
        </style>

        ...

我尝试了各种方法从主站点级样式表获取我的样式以影响按钮，但 none 似乎有效：

main.css

--paper-progress-button-button {
    background-color: red;
}

main.css

* {
    --paper-progress-button-button {
        background-color: red;
    };
}

custom_style.html

<custom-style>
    <style is="custom-style">
        --paper-progress-button-button {
            background-color: red;
        }
    </style>
</custom-style>

custom_style.html

<custom-style>
    <style is="custom-style">
        :root {
            --paper-progress-button-button {
                background-color: red;
            };
        }
    </style>
</custom-style>

documentation for styling Polymer 2 很大，但连 @apply 都不提一次！那么我如何从我的站点级样式表中真正设置该按钮的样式？

Answer 1

Polymer 当前仅在 custom-style 或 Polymer 元素的 style 中填充 CSS 属性；而不是来自外部样式表。

另请注意样式用法不正确，因为 CSS 属性名称后面必须跟一个冒号：

.my-div {
  --paper-progress-button-button: {
    background-color: red;
  };
}

demo

如何从主样式表中设置 Polymer 元素的样式？

How to style a Polymer element from the main stylesheet?

html

css

polymer

polymer-2.x