html - 如何从主样式表中设置 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>

        ...

我已经尝试了各种方法来从主站点级样式表中获取我的样式来影响按钮，但似乎都没有用:

ma​​in.css

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

ma​​in.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