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>

        ...

我尝试过各种各样的方法从主网站级样式表中获取样式以影响按钮，但似乎都没有效果：

的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目前只在style或Polymer元素.my-div { --paper-progress-button-button: { background-color: red; }; }中填充CSS属性;而不是来自外部样式表。

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

SELECT  COUNT(b.A_identifier)
FROM    TableB b
        LEFT JOIN TableA a
            ON b.A_identifier = a.A_identifier
                AND b.Value = a.Value
WHERE   a.A_identifier IS NULL -- filters out inexisting value
        AND EXISTS (SELECT 1
                    FROM TableA c
                    WHERE b.A_identifier = c.A_identifier) -- shows only  A_identifier 
                                                           -- that is present in TableA

demo

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

1 个答案: