Versuch, vaadin-date-picker Eingabetext zu formatieren

Question

Ich möchte die Farbe des Eingabetextes in rot ändern, wenn die Datumsauswahl innerhalb einer Elementklasse 'has-Error' liegt.

Im Folgenden ein Beispiel für das, was ich auf meiner Seite index.html versuchte, hatte aber keine Wirkung:

<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> 

Es sieht aus wie die Datumsauswahl wird einen Papier-Eingang, aber ich kann nicht finde heraus, wie man einen Stil bedingt anwendet.

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

edit: Ich habe die html hinzugefügt:

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

Answer 1

Ich weiß nicht, ob ich gut verstehe Ihre Frage, aber mit Ihrem HTML-Code wäre es einfacher gewesen.

Fall 1

Lassen Sie sagen, Ihre HTML-Code wie folgt aussieht:

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

wird Ihre CSS-Code wie folgt aussieht:

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

ODER

Fall 2

Wenn Ihr HTML sieht wie folgt aus:

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

CSS:

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