爲什麼CSS樣式不適用於帶有Vaadin元素的Angular 2組件？

Question

我忙用角2，我發現這裏

https://vaadin.com/docs/-/part/elements/angular2-polymer/tutorial-index.html

在第5.3章做對Vaadin元素教程，樣式應用到app.component.ts如下

import { Component } from [email protected]/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <app-header-layout has-scrolling-region> 
     <app-header fixed> 
     <app-toolbar> 
      <div title spacer>All heroes</div> 
     </app-toolbar> 
     </app-header> 
     <div>My application content</div> 
    </app-header-layout> 
    `, 
    styles: [` 
    app-toolbar { 
     background: var(--primary-color); 
     color: var(--dark-theme-text-color); 
    } 
    `] 
}) 
export class AppComponent { } 

樣式中的變量不適用於組件，但是當我將顏色更改爲紅色或藍色時，如下所示：

app-toolbar { 
     background: red; 
     color: blue; 
    } 

它實際上起作用，這意味着找不到變量。

我去了index.html，看到有一個風格被應用到身體標籤也有變量。

<!-- Styles --> 
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html"> 
    <link rel="import" href="bower_components/paper-styles/color.html"> 
    <link rel="import" href="bower_components/paper-styles/default-theme.html"> 
    <link rel="import" href="bower_components/paper-styles/typography.html"> 
    <link rel="import" href="bower_components/paper-styles/shadow.html"> 
    <style is="custom-style"> 
    body { 
     @apply(--layout-fullbleed); 
     @apply(--paper-font-body1); 
    background: var(--primary-background-color); 
     color: var(--primary-text-color); 
    } 
    </style> 

雖然這些變量實際上被發現和應用。我測試了它被換出的另一個變量，如下圖所示：

<style is="custom-style"> 
     body { 
      @apply(--layout-fullbleed); 
      @apply(--paper-font-body1); 
      background: var(--paper-pink-a200); 
      color: var(--primary-text-color); 
     } 
     </style> 

這個變量變成了粉紅色的背景和實際工作。

這些變量主要分佈在color.html和默認theme.html和被初始化爲遵循

默認theme.html

<link rel="import" href="../polymer/polymer.html"> 
<link rel="import" href="color.html"> 

<style is="custom-style"> 

    :root{ 
    --primary-text-color: var(--dark-theme-text-color); 
    --dark-theme-text-color: #ffffff; 
    --primary-color: var(--paper-indigo-500); 
</style> 

color.html

<link rel="import" href="../polymer/polymer.html"> 

<style is="custom-style"> 
    --paper-indigo-500: #3f51b5; 
    --paper-pink-a200: #ff4081; 
</style> 

由於某些原因，變量會在index.html中應用，但不會在app.component.ts中應用，我會一步步地按照教程進行操作。你能幫我解決這個問題嗎？

編輯： 還增加"emitDecoratorMetadata": true我的代碼爲註釋（而此前因爲某種原因被刪除）建議，在我克羅姆控制檯沒有錯誤，也沒有對這個問題的任何警告。如果有什麼額外的東西需要詢問，我將提供

Answer 1

Angular不支持CSS變量和mixin。 這是聚合物功能，只適用於聚合物元素。

作爲一種解決方法，您可以嘗試創建一個包裝聚合物元素，在其中放置樣式並用該聚合物包裝元素包裝Vaadin元素。