0

在我的聚合物项目中，我在两个页面中使用了 vaadin-combobox，如下所示： - page1：我创建了一个自定义组合框样式文件并导入到我的页面：

<link rel="import" href="../elements/base/vaadin-text-field-custom-radius-theme.html">

该文件的内容：

<dom-module id="vaadin-text-field-custom-radius-theme" theme-for="vaadin-text-field">
<template>
    <style>
        [part="input-field"] {
            border-radius: 2px;
            background-color: white;
            border: 1px solid #808080;
            height: 100%;
            font-family: "Roboto", sans-serif !important;
            color: #4c4c4c !important;
            padding-left: 10px;
            font-size: 14px;
            box-sizing: border-box;
            max-height: 100%;
            background-color: transparent;
            background-image: none !important;
        }
        [part="value"] {
            border: 0px !important;
            box-shadow: none !important;
            height: 100%;
            box-sizing: border-box;
            max-height: 100%;
            background-color: transparent;
            text-align: var(--cmb-align,left);
        }
        .vaadin-text-field {
            height: 100%;
            box-sizing: border-box;
            max-height: 100%;
        }
        .vaadin-text-field-container {
            height: 100%;
            box-sizing: border-box;
            max-height: 100%;
        }
       @media(max-width:1024px){
        [part="input-field"] {
            font-size: 12px !important;
            padding-left: 5px;
        }
        [part="value"] {
            font-size: 12px !important;
        }
        }
    </style>
</template>

在 page2 中，我有另一个带有其他一些 css 属性的自定义样式文件。

我用

this.set('route.path',"/page2")

从 page1 重定向到 page2 然后使用

 this.set('route.path',"/page1")

在 page2 中返回 page1。此时我在 page1 中的组合框由我已导入到第 2 页的自定义文件中定义的 css 设置样式（虽然我希望它仍然由 vaadin-text-field-custom-radius-theme.html 中的 css 设置样式）。可以一些一个告诉我为什么？

p/s：我尝试执行 Anton Platonov 的建议，但我发现如果我的第 2 页不导入任何自定义样式文件，当我从第 2 页返回第 1 页时，在中定义的 vaadin-text-field 的默认样式..\bower_components\vaadin-text-field\vaadin-text-field.html 用于我的组合框，而不是我的 vaadin-text-field-custom-radius-theme.html。

如果我删除 vaadin-text-field.html 中的默认样式，我的组合框会从浏览器的默认样式中修改 css，但仍然不是我的 vaadin-text-field-custom-radius-theme.html。它被视为我的 vaadin-text-field-custom-radius-theme 不再存在。

如果我刷新我的第 1 页，一切都会变得正常。这是我的组合框代码：

<vaadin-combo-box-light style="width:100%;height:30px" id="cmdCompanyName" class="fix-size combobox" label="" allow-custom-value items='[[companies]]'
                        value="" item-label-path="name" item-value-path="id" attr-for-selected="id" on-keyup="searchData"
                        on-custom-value-set="searchData2" on-value-changed="searchData2">
                        <vaadin-text-field style="width:100%;height:30px;" class="cmb-text-field" maxlength="150">
                            <iron-icon class="prefix" icon="icons:search" slot="prefix"></iron-icon>
                            <iron-icon class="suffix toggle-button" slot="suffix" icon="icons:expand-more"></iron-icon>
                        </vaadin-text-field>
                    </vaadin-combo-box-light>
4

1 回答 1

2

我假设，您的项目是单页应用程序，并且您使用<app-route>/<iron-pages>或类似的路由。通过这种方式，浏览器实际上使用了单个真实文档，然后对其进行操作以实现“页面”和导航。

由于技术限制，Vaadin 组件的主题样式模块并非您所期望的那样动态。一旦加载并初始化了主题和组件，它们的样式就会在其相应组件的类中被记忆。

假设您首先加载“page2”。加载后，<vaadin-text-field>记忆其样式，可以应用更多的主题模块。这就是为什么当您导航到“page1”时，<vaadin-text-field>将继续使用“page2”中的记忆样式。

这意味着，您必须在文档中的所有实例中使用相同的设置样式，例如， <vaadin-text-field>。因此，您必须使用其他方式使它们看起来不同，而不是交换样式。这里有一些选项。

范围:host()选择器

使用范围:host()选择器为所有自定义主题样式添加前缀，例如：

<dom-module id="my-text-field" theme-for="vaadin-text-field">
  <template>
    <style>
      :host(.no-radius) [part="input-field"] {
        border-radius: 0;
      }
    </style>
  </template>
</dom-module>

然后在html中使用：

<h3>Default appearance</h3>
<vaadin-text-field></vaadin-text-field>

<h3>No-radius class</h3>
<vaadin-text-field class="no-radius"></vaadin-text-field>

自定义 CSS 属性

<vaadin-text-field>在的父 DOM 范围内定义自定义 CSS 属性，例如在页面组件中：

<dom-module id="page-1">
  <template>
    <style>
      :host {
        --custom-radius: 4px;
      }
    </style>

    <vaadin-text-field></vaadin-text-field>
  </template>
</dom-module>

<script>
  Polymer({is: 'page-1'});
</script>

您还可以为主文档范围定义一些其他值：

<custom-style>
  <style>
    html {
      --custom-radius: 0;
    }
  </style>
</custom-style>

将主题样式模块中定义的自定义 CSS 属性用于<vaadin-text-field>：

<dom-module id="my-text-field" theme-for="vaadin-text-field">
  <template>
    <style>
      [part="input-field"] {
        border-radius: var(--custom-radius);
      }
    </style>
  </template>
</dom-module>

然后看看结果：

<h3>Main document appearance:</h3> 
<vaadin-text-field></vaadin-text-field>

<h3>Page 1 appearance:</h3>
<page-1></page-1>

另见：https ://github.com/vaadin/vaadin-themable-mixin/wiki/4.-Scoping-Styles-in-a-Theme-Module

于 2018-03-15T16:05:00.327 回答