html - 样式化从外部样式表导入的聚合物元素

Question

我正在使用paper-card聚合物目录中的聚合物元素。

我可以使用以下命令从我的 html 文件中指定一个 mixin：

<style is="custom-style">
paper-card {
  width:300px; 
  --paper-card-header:{width:200px;
  height: 200px;
  margin: 25px auto;
  border-radius: 200px;
};
}
</style>

如何从外部样式表中指定相同的样式？我不想更改paper-card.html导入文件的内容。

谢谢。

Answer 1

要将组件的样式包含在外部样式表中，您可以执行以下操作：

• 如果样式表是一个CSS文件，只需像导入任何其他样式表一样导入它。这已被弃用

• 您可以像创建自定义 Polymer 组件一样创建样式表：

<dom-module id="global-styles">
  <template>
    <style>
      .card {
        // Your styles go here as normal
      }
    </style>
  </template>
</dom-module>

您将其导入到您希望将它们应用到的 Polymer 组件中：

<link rel="import" href="../path/to/my/external/styles">
<dom-module id="some-other-component">
  <template>
    <style include="global-styles"></style>
      <style>
        //Some more styles
      </style>
  </template>
</dom-module>

有关这方面的更多信息以及具体的指南/规则，请查看 Polymer Docs！