我有一个自定义的 Polymer 元素,它包含一个纸对话框和一个纸项。

当对话框的 layered 属性设置为 true 时,我无法设置纸张元素的样式。

<polymer-element name="myElement">
	<template>
		<style>
			paper-item.myClass {
				background: #B7AAFA;
			}

			html /deep/ paper-item.myClass {
				background: #B7AAFA;
			}
		</style>
		<paper-dialog id="myDialog" layered="true">
			<paper-item class="myClass">
				Some Words
			</paper-item>
		</paper-dialog>
	</template>
	<script>
		Polymer(
			...
		);
	</script>
</polymer-element>


我曾尝试仅通过 ID 引用它,使用/deep/和::shadow 的变体,以及模板内外的样式块。

你能看出我的设置有什么问题吗?

谢谢

最佳答案

好的,我看到问题了。 paper-dialog 将整个元素移动到核心覆盖层中。所以只需将类定义移动到纸张对话框中,例如

<paper-dialog id="myDialog" layered="true">
 <style>
  .myClass {
    background:red;
  }
 </style>
 <paper-item class="myClass">
  Some Words
 </paper-item>
</paper-dialog>

这保证了您的自定义样式也将被移动。

关于css - polymer 自定义元素不会样式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29009554/

10-11 23:33
查看更多