创建了一个自定义聚合物元素“autocomplete”,其中包括现有的聚合物元素“paper-autocomplete”。“paper-autocomplete”元素类具有特定样式的“纸张输入”元素。如何更改“自动完成”元素类(称为“纸张自动完成”)中的“纸张输入”元素样式?
paper-input
元素使用paper-input-container
,因此您可以按照预期/允许的方式定义一组CSS variables来对其进行样式化。
如果您查看paper-input-container
here的源代码,并查看“### Styling”,您将看到从“外部”设置元素样式的所有选项。
在paper-autocomplete元素中添加以下内容:
paper-input {
@apply --my-styles;
}
在包含paper-autocomplete的父元素中添加:
paper-autocomplete {
--my-styles: {
background-color: green;
border-radius: 4px;
border: 1px solid gray;
};
}