Question

我想在日期选择器位于元素类中时将输入文本的颜色更改为红色＆＃39; has-Error＆＃39;。

以下是我在index.html页面上尝试的示例，但没有效果：

<style is="custom-style">
        :root {
            --primary-color: #1ab394;
            --light-primary-color: var(--paper-teal-100);
        }
        html {
            .has-error {
                 --paper-input-container-label: { color: red }

            }
            --paper-input-container-label: { font-size: 12px }
            --paper-input-container-label-focus: { font-size:12px; font-weight:500 }
            --paper-input-container-input: { font-size:12px }
            --vaadin-date-picker-overlay: { max-height:400px }
         }   
    </style>

看起来日期选择器正在使用纸张输入，但我无法弄清楚如何有条件地应用样式。

(Click link for example picture) - When looking at the picture example, I would like to have 'Choose Date' in red

编辑：我添加了html：

[ngClass]="{'has-error':hasErrors('value')}" class="form-group md-form-group">
<vaadin-date-picker [disableCond]="" [formControl]="" label=""></vaadin-date-picker>

Answer 1

我不知道我是否理解您的问题，但使用您的HTML代码会更容易。

案例1

假设您的HTML代码如下所示：

<div class="has-error">
    <vaadin-date-picker id="datePicker"></vaadin-date-picker>
</div>

您的CSS代码如下所示：

.has-error vaadin-date-picker{
    --paper-input-container-label:{
          color:red;
    }
}

OR

.has-error #datePicker{
    --paper-input-container-label:{
          color:red;
    }
}

案例2

如果你的HTML看起来像这样：

<vaadin-date-picker class="has-error"></vaadin-date-picker>

CSS：

.has-error{
    --paper-input-container-label:{
          color:red;
    }
}

Answer 2

对于仅设置输入字段的样式，我建议您使用vaadin-date-picker-light。仅仅输入风格就容易得多。您几乎可以使用其中的任何html作为输入字段。

当前版本不支持Mixins。因此，在它们上设置值将不起作用

详细信息请参阅此页面 https://www.webcomponents.org/element/vaadin/vaadin-date-picker/v2.0.0-alpha2/elements/vaadin-date-picker#property-max

如果你想使用自定义主题进行叠加和其他事情，请使用这个主题示例 https://cdn.vaadin.com/vaadin-date-picker/2.0.2/demo/theming.html

试图设置vaadin-date-picker输入文本的样式

2 个答案: