样式化从外部样式表导入的聚合物元素答案

【问题标题】：Style a polymer element import from external stylesheet样式化从外部样式表导入的聚合物元素
【发布时间】：2017-05-11 22:00:26
【问题描述】：

我正在使用聚合物目录中的聚合物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 导入文件的内容。

谢谢。

【问题讨论】：

外部样式表是什么意思？您提供的示例具有外部样式表的语法。如果您在元素中使用样式，则不需要使用 is="custom-style" 。如果您使用外部样式表，则必须通过 <style include="custom-style"> 将其导入您的元素
paper-card.html 是聚合物目录中的一个元素。我将它导入到我的 html 文件中。我还有一个styles.css，我将它导入到我的html文件中。我想在我的styles.css 中指定上面的 css 块并将其应用于我的聚合物元素。
没有什么不同。与您在 html 元素中编辑 css 规则的方式相同，您也可以在需要包含的外部样式表中执行此操作。

标签： html css polymer polymer-2.x

【解决方案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>

有关这方面的更多信息以及具体的指南/规则，check out the Polymer Docs on this!

【讨论】：