我搜索了我的问题并找到了 this
但是，公认的解决方案对我不起作用，但我无法发表评论，因为我只有 6 声望 -.-
情况是，我想使用 paper-item来自 paper-listbox 中的 Polymer 框架 这行得通，但是当您通过单击选择一个元素时，背景会变为灰色... 文档和我链接的问题的答案 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>
最佳答案
我找到了“解决方案”!
我必须覆盖的属性称为 --paper-item-focused-before
我查看了 <paper-item> 的源代码并在 shared-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 <paper-item> 的伪元素.
关于css - polymer 1.2 : Change paper-item selected background colour，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34493060/