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文档中获取的伪示例。
一旦您创建了要共享的样式表，您可以将其添加到要添加该样式的元素中，并使用<style>中的 include 来应用它们。 />

<!-- 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中使用外部样式表

1 个答案: