样式中带有 :host 的 Polymer @import 主题文件没有影响

2022-01-10 00:00:00 electron css polymer

回到另一个 Polymer 问题，我有一个 Polymer/Electron 应用程序，我正在尝试设置样式.

Back with another Polymer question, I have a Polymer/Electron app that I'm trying to style.

我想创建一个 theme.css 包含一个 :host 块，其中包含我的整个主题，然后我可以将其导入到我的模块样式表中，但我已经尝试了一些不同的方法并尝试在文档中查找任何内容均无济于事.

I want to create a theme.css that contains a :host block with my entire theme in it that I can then import into my modules stylesheet but I've tried a few different things and tried finding anything in the documentation to no avail.

到目前为止，我已经在<template>定义之外尝试了和:

So far, I have tried in, and outside of the <template> definition:

<link rel="stylesheet" href="./account-list.css"> 与 @import
<style>@import 'my-theme.css';</style> 就在我的 <link>
上方:root 而不是 :host 在我的 theme.css

<link rel="stylesheet" href="./account-list.css"> with an @import
<style>@import 'my-theme.css';</style> just above my <link>
:root instead of :host in my theme.css

但似乎都不起作用，theme.css 肯定是被请求的，但对模块的样式没有影响.

But neither seem to work, the theme.css is definitely being requested but has no affect on the module's style.

Polymer 有没有这样的主题，我真的不想有构建步骤.

Is there anyway to have a theme like this for Polymer, I really don't want to have a build step.

推荐答案

引入了一个叫做style module的新概念(实际上是一个dom-module元素在幕后)在 Polymer 1.1 中(阅读 这里)和包含外部样式表的旧方法已被弃用(阅读它 这里).

There's a new concept called style module (actually a dom-module element behind the scene) introduced in Polymer 1.1 (read it here) and the old way of including external stylesheets has been deprecated (read it here).

基本上，您需要创建一个 html 文件，就像您通常创建一个元素来存储您的样式一样.id 定义了该文件的名称，稍后将被引用.

Basically, you need to create an html file like how you normally create an element to store your styles. The id defines the name of this file that will be referenced later on.

<!-- shared-styles.html -->
<dom-module id="shared-styles">
  <template>
    <style>
      .red { color: red; }
    </style> 
  </template>
</dom-module>

那么显然你需要在你的页面中导入这个文件.

Then obviously you need to import this file in your page. 

<link rel="import" href="shared-styles.html">

现在，有两种情况.

  1. 如果您在文档级别使用 custom-style，则需要包括你之前这样定义的 style 模块 -

  1. If you are using custom-style at the document level, you need to include the style module you previously defined like this -

<style is="custom-style" include="shared-styles"></style>

如果您只是想将 style 模块 包含在您的一个元素，这样做 -

If you simply want to include the style module inside one of your elements, do this -

<dom-module id="my-element"><style include="shared-styles"></style>

看看这个plunker，它演示了这两种情况.

Have a look at this plunker that demonstrates both scenarios.

请记住，在您的特定示例中，由于您使用的是 :host，我假设您将使用场景 2.所以这个 plunker 应该更清楚一点.

Keep in mind that in your particular example, since you are using :host, I assume you will go with scenario 2. So this plunker should be a bit more clearer.

相关文章