Polymer 1.2：更改纸项目选择的背景颜色

Question

我搜索了我的问题并找到了

然而，公认的解决方案对我不起作用，但我无法发表评论，因为我只有 6 个声望 -.-

所以情况是，我想在 paper-listbox 中使用来自 Polymer 框架的 paper-item 这行得通，但是当您 select 通过单击某个项目时，背景会变为灰色... 文档和我链接的问题的答案 abvoe 建议覆盖 --paper-item-selected / --paper-item-focus mixin，但这对我不起作用

我的代码：

<link rel="import" href="../../../external/Polymer/bower_components/polymer/polymer.html">


<dom-module id="cit-literal-item">

<template>
    <!-- scoped CSS for this element -->
    <style is="custom-style">
        .spacer {
            @apply(--layout-flex);
        }
        paper-item {
            --paper-item-selected: {
                background-color: #FFFFFF;
            };

            --paper-item-focused: {
                background-color: #FFFFFF;
            };
        }
    </style>
    <paper-item>Test</paper-item>
</template>
</dom-module>

主文档代码：

...
<!-- Polymer custom elements -->
<link rel="import" href="lib/internal/dom-modules/literals/cit-literal-item.html">
...
<body>
    <paper-listbox>
        <cit-literal-item></cit-literal-item>
        <cit-literal-item></cit-literal-item>
    </paper-listbox>
</body>

Answer 1

我找到了"solution"！我必须覆盖的属性称为 --paper-item-focused-before

我查看了 <paper-item> 的源代码并在 shared-styles.html

中找到了这个共享-styles.html

:host(.iron-selected) {
    font-weight: var(--paper-item-selected-weight, bold);
    @apply(--paper-item-selected);
  }
  :host([disabled]) {
    color: var(--paper-item-disabled-color, --disabled-text-color);
    @apply(--paper-item-disabled);
  }
  :host(:focus) {
    position: relative;
    outline: 0;
    @apply(--paper-item-focused);
  }
  :host(:focus):before {
    @apply(--layout-fit);
    background: currentColor;
    content: '';
    opacity: var(--dark-divider-opacity);
    pointer-events: none;
    @apply(--paper-item-focused-before);
  }

可以看到，唯一默认应用颜色的 mixin 是 --paper-item-focused-before，它将样式应用于 <paper-item>.

的 :before 伪元素

Answer 2

--paper-item-focused-before: { 背景：透明; };

Polymer 1.2：更改纸项目选择的背景颜色

Polymer 1.2: Change paper-item selected background colour

html

css

polymer

paper-elements