Question

我在angular2-dart项目中使用聚合物和聚合物元素。

我能够添加聚合物元素（例如纸卡），但我不能使用css-mixins，我不知道我是否错过了导入或其他东西。

我的.dart

import 'package:angular2/core.dart';
//Polymer imports
import 'package:polymer_elements/paper_card.dart';
import 'package:polymer_elements/paper_button.dart';
import 'package:polymer_elements/paper_icon_button.dart';
import 'package:polymer_elements/iron_icon.dart';
import 'package:polymer_elements/paper_styles/classes/typography.dart';
import 'package:polymer_elements/iron_flex_layout/classes/iron_flex_layout.dart';

@Component(
    templateUrl: '../view/book_splash_component.html',
    selector: 'book-splash',
    styleUrls: const ['../view/css/book_splash_component.css'],
    encapsulation: ViewEncapsulation.Native
)
class BookSplashComponent{
    //nothing that matters
}

我的.html

<paper-card class="rate">
    <div class="rate-content">
        <div class="card-content">
            <div class="rate-header">Rate this album</div>
            <div class="rate-name">Mac Miller</div>
            <div>Live from space</div>
        </div>
        <div class="card-actions">
            <paper-icon-button class="rate-icon" icon="star"></paper-icon-button>
        </div>
    </div>
    <div class="rate-image"></div>
</paper-card>

我的.css与mixins（不起作用）

paper-card.rate { @apply(--layout-horizontal); }
  .rate-image {
    width: 100px;
    height: 170px;
    background: url('./donuts.png');
    background-size: cover;
  }
  .rate-content {
    @apply(--layout-flex);
    float: left;
  }
  .rate-header { @apply(--paper-font-headline); }
  .rate-name { color: var(--paper-grey-600); margin: 10px 0; }
  paper-icon-button.rate-icon {
    --iron-icon-fill-color: white;
    --iron-icon-stroke-color: var(--paper-grey-600);
  }

但如果我用相应的样式替换mixins就行了！可能我错过了一些愚蠢的东西。

我正在尝试＆＃34;纸牌可以有一个水平图像＆＃34;这里的例子： https://elements.polymer-project.org/elements/paper-card?active=paper-card&view=demo:demo/index.html

Answer 1

您是否尝试使用阴影dom，例如在角度组件或聚合物上禁用它以查看发生了什么？

Answer 2

这是特定于聚合物的，仅适用于Polymer元素的样式标记或head元素的<style is="custom-style">。

如何将CSS mixins与Angular 2，Dart和Polymer一起使用

2 个答案: