html - 设置从外部样式表导入的 polymer 元素的样式

Question

我正在使用 polymer 目录中的 polymer 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>

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