为什么CSS样式不适用于带有Vaadin元素的Angular 2组件？

debugcn 发表于 Dev

沙人

我在忙于使用Angular 2编写Vaadin元素的教程

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

在第5.3章中，将样式应用于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，发现有一种样式被应用到body标签，它也有变量。

  <!-- 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和default-theme.html中，并按以下方式初始化

default-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到我的代码中作为注释（由于某种原因已将其删除），并且在我的Crome控制台中没有关于此问题的错误或任何警告。如果您有任何其他需求，我会提供

贡特·佐克鲍尔（GünterZöchbauer）

Angular不支持CSS变量和mixins。这是Polymer功能，仅适用于Polymer元素。

作为一种解决方法，您可以尝试创建一个包装器Polymer元素，在其中放置样式并使用该Polymer包装器元素包装Vaadin元素。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。