嘗試使用vaadin-date-picker輸入文本

Question

當日期選擇器位於元素類「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代碼它會更容易。

案例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; 
    } 
}