Question

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

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

所以情况是，我想使用纸质列表框中的Polymer框架中的paper-item 这样可行，但是当您通过单击选择项目时，背景将变为灰色... 文档和我链接的问题的答案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

我找到了＆＃34;解决方案＆＃34;！我必须覆盖的属性称为--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，它将样式应用于:before的{{1}}伪元素。

Answer 2

- 以纸张为重点的项目：{背景：透明; };

聚合物1.2：更改纸张选定的背景颜色

2 个答案: