Question

我想更改聚合物paper-input的颜色值。

我读了guide，但对我来说没有意义。我从未使用过CSS变量，但这是根据Mozilla CSS specs

应该做的

// For shadow DOM
body /deep/ .gold-cc-cvc-input::shadow {
    --paper-input-container-focus-color: $color;
    --paper-input-container-color: $color;
    --paper-input-container-invalid-color: $color;
    --paper-input-container-input-color: $color;

    text-align: left;
    margin: auto;
}

我尝试执行CSS变量，但样式不适用。

我在这里跑圈子，如果有聚合物经验的人可以帮助我，那就太棒了。

Answer 1

嗯，这里唯一缺少的是您需要样式上的is="custom-style"属性。

  <style is="custom-style">..</style>

同样body /deep/ .gold-cc-cvc-input::shadow由于某些原因无效，我最终使用了:root .gold-cc-cvc-input。

最终代码：

:root .forms-input  {
    --paper-input-container-focus-color: $color;
    --paper-input-container-color: $color;
    --paper-input-container-invalid-color: $color;
    --paper-input-container-input-color: $color;
}

如果Polymer团队的某个人读到这个：PS：你的文档需要完整的代码示例，很难在那里猜测任何东西。更少文字更多代码！

如何自定义预定义元素

1 个答案: