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

Question

当日期选择器位于元素 class 'has-Error' 内时，我想将输入文本的颜色更改为红色。

下面是我在 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 代码会更容易。

案例一

假设您的 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;
    }
}

或

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

案例二

如果您的 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 输入文本的样式

Attempting to style vaadin-date-picker input text

css

mixins

vaadin

polymer

angular