Question

我试图覆盖vaadin-combo-box-overlay元素中的背景颜色。

这是我要覆盖的css，更具体地说是背景属性，源自（https://github.com/vaadin/vaadin-combo-box/blob/master/vaadin-combo-box-overlay.html）

:host {
      position: absolute;
      @apply(--shadow-elevation-2dp);
      background: #fff;
      border-radius: 0 0 2px 2px;
      top: 0;
      left: 0;
  .......
    }

所以我尝试过类似的事情：

 :root ::content vaadin-combo-box-overlay.vaadin-combo-box-overlay {
                            background: red !important;
                            background-color: red !important;
 }

我也尝试使用:host，但我想应该使用:root，因为我在对话框中使用此下拉列表，而叠加组件似乎不是对话框的孩子。我尝试过不同的组合，如上所述，没有任何成功。

另外，我想知道为什么背景没有参数化，因为文字颜色是：

 #selector .item {
      cursor: pointer;
      padding: 13px 16px;
      color: var(--primary-text-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

为--primary-text-color指定其他值我可以更改文字颜色..

感谢。

Answer 1

你可以用这样的javascript来做。

    ready: function() {
      var domElem=Polymer.dom(this).node.$.YOUR-VAADIN-ELEMENT-ID.$.overlay.style.backgroundColor="red";
    }

OR

ready: function() {
          var css = '#selector .item { background-color:red; }';
          var style = document.createElement('style');
              style.type = 'text/css';
              style.appendChild(document.createTextNode(css));
          Polymer.dom(this).node.$.tourSelector.$.overlay.$.selector.appendChild(style);
        }

想要一个有效的CSS选择器，但我不能在CSS中设置断点来找出合适的选择器！

Answer 2

您应使用 dom-module 样式化样式部分，请参见以下示例：

<dom-module id="combo-box-overlay-styles" theme-for="vaadin-combo-box-overlay">
    <template>
        <style>
            [part~="content"] {
                background-color: red;
            }
        </style>
    </template>
</dom-module>

在这里https://github.com/vaadin/vaadin-themable-mixin/wiki

了解更多

Answer 3

谢谢帕特里克！

我没想过要这样试试。

这就是我所做的，虽然是一个黑客的解决方案。

ready : function(){
                var combo = this.$$('#comboid');
                combo.addEventListener('vaadin-dropdown-opened'', function() {
                    var overlay = Polymer.dom(this.root).querySelector('#overlay');
                    overlay.style.backgroundColor = primaryBackground;
                });
            },

我只能在扩展组合时访问叠加层，因此在值更改侦听器中，组合将被展开。

vaadin-combo-box / vaadin-combo-box-overlay更改背景颜色/ Polymer API

3 个答案: