如何在 Polymer 2.0 中使用外部样式表

Question

我是新手所以请放轻松...

我正在尝试使用外部样式表设置 Polymer 2.0 自定义元素的样式，但是我无法将外部样式表应用到该元素。

这是我要设置样式的元素 (web-app.html):

<link rel="import" href="../elements/Styles/style-web-app.html">

<dom-module id="web-app">
<template>
<div id="header-container" class="header-container">
<div id="logo">
<img id="Mono" class="logo" src="../img/mono_primary_white_RGB.png" 
height="75px" width="75px" />
</div>
<div id="header">
<h1 id="title">ICR</h1>
</div>
</div>
<div id="tabs">
<paper-tabs selected="{{selected}}">
<paper-tab name="Name">Name</paper-tab>
<paper-tab name="Type">Type</paper-tab>
<paper-tab name="Usages">Usages</paper-tab>
</paper-tabs>
</div>
</template>

这是外部样式表代码 (style-web-app.html):

<dom-module id="style-web-app">
<template>
<style>
:host{
#title {
font-size: 30px;
/* text-align: center; */
width: 500px;
color: #FFFFFF;
}
#header-container, #tabs {
background-color: #01579B;
display: flex;
color: #FFFFFF;
}
#header {
display: inline-block;
}
}
</style>
</template>
</dom-module>

有人能告诉我哪里错了吗？

TIA

Answer 1

这是直接从 Polymer 2.0 文档中提取的伪示例。
创建要共享的样式表后，您可以将其导入要添加该样式的元素，并使用 include 在 <style> -

<!-- Create Your external Style document -->
<dom-module id="my-style-module">
  <template>
    <style>
      p {
       color: red;
      }
      <!-- rest of styles to share go here! -->
    </style>
  </template>
</dom-module>


<!-- import custom-style -->
<link rel="import" href="/bower_components/polymer/lib/elements/custom-style.html">
<link rel="import" href="my-style-module.html">
<dom-module>
 <template>
   <style include="my-style-module">
     <!-- custom element style go here! -->
   </style>

  <p>Paragraph A: I am in the main DOM. I am red.</p>
 </template>

 <script>
  //Your custom element script
 </script>
</dom-module>

因此，在您的示例中，您必须更新 web-app.html 以将 style-web-app 中的样式包括为 -

<style include="style-web-app">
         <!-- custom element style go here! -->
</style>

您可以进一步阅读自定义样式和外部样式表here

如何在 Polymer 2.0 中使用外部样式表

How to use an External Stylesheet in Polymer 2.0

css

polymer-2.x