Question

shared-styles.html

<link rel="import" href="../bower_components/polymer/lib/elements/custom-style.html">

<dom-module id="shared-styles">
  <template>
    <style>
      .content {
        background-color: white;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
        margin: 20px;
      }

      .content-center {
        display: flex;
        min-width: 100vh;
        min-height: calc(100vh - 64px);
      }
    </style>
  </template>
</dom-module>

ForgotPassView.html

<link rel="import" href="../../shared-styles.html">

<dom-module id="forgotpass-view">
  <template>
    <style include="shared-styles">
      :host {
      }
    </style>

    <content-card id="contentCard"></content-card>
  </template>

  <script>
    class ForgotPassView extends Polymer.Element {
      static get is() {
        return 'forgotpass-view';
      }
    }

    window.customElements.define(ForgotPassView.is, ForgotPassView);
  </script>
</dom-module>

你好告诉我如何使 ForgotPassView 具有自己的样式（：host？），然后从共享样式中使用

类似：host {} 和 .content-center {}

Answer 1

您可以像这样导入自定义CSS。

  <link rel="import" href="../../shared-styles.html">

<dom-module id="forgotpass-view">
  <link rel="import" href="../../custom-styles.html">

<dom-module id="forgotpass-view">
<template>
  <style include="shared-styles">
    :host {
    }
  </style>

  <content-card id="contentCard">
    <paper-fab class="my-color">Test</paper-fab>
  </content-card>
</template>

<script>
  class ForgotPassView extends Polymer.Element {
    static get is() {
      return 'forgotpass-view';
    }
  }

  window.customElements.define(ForgotPassView.is, ForgotPassView);
</script>
</dom-module>
<template>
  <style include="shared-styles">
    :host {
    }
  </style>

  <content-card id="contentCard"></content-card>
</template>

<script>
  class ForgotPassView extends Polymer.Element {
    static get is() {
      return 'forgotpass-view';
    }
  }

  window.customElements.define(ForgotPassView.is, ForgotPassView);
</script>

聚合物延伸样式

1 个答案: