动态更改纸张输入错误颜色

Question

我有一个 paper-input 元素，当输入为空以标记发生错误时，它会显示为红色，但我希望当用户输入无效字符串时，这个相同的元素显示为橙色，以使其看起来像警告。

我知道我可以使用这样的预定义属性更改颜色：

paper-input {
  --paper-input-container-invalid-color: orange;
}

但是这种着色适用于任何 error/invalid 状态。

有没有办法根据错误类型动态更改此颜色？

Answer 1

我找到了一种方法，使用 Polymer 的 updateStyles 函数：

Polymer.updateStyles({'--paper-input-container-invalid-color': 'new_color'});

Answer 2

您可以创建自定义 CSS class 然后应用它，例如 this.$.myInput.classList.add('error').

或者在这种情况下（Polymer 1.0）：

Change paper-input error color dynamically