如何将css样式应用于流星中的模板

2019年8月4日 200次阅读 
<template name="userPill">
    <span>{{Zipcode}}</span>
    <span>{{City}}</span>
</template>

以上模板用于流星自动完成.我需要的是列表周围的容器上的垂直滚动条,因此用户可以滚动这些值.非常感谢任何帮助.

谢谢

最佳答案 DOM中不存在模板标记,因此您不能依赖它来获取CSS.如果您需要专门定位该模板(而不是向其元素添加泛型类),最好的办法是将其内容包装在div中,如下所示：

<template name="userPill">
  <div class="user-pill">
    <span>{{Zipcode}}</span>
    <span>{{City}}</span>
  </div>
</template>

然后你可以在你的CSS中定位它：

.user-pill {
  color: red;
}

在较大的项目中,我更喜欢使用双下划线来标​​识模板的类名,例如< div class =“__ user-pill”>.它可能看起来有点难看,但我发现找出正在发生的事情真的很有帮助.

根据您的评论,您似乎需要设置userPill容器的样式.假设你有一个这样的模板：

<template name="userPillContainer">
  <div class="user-pill-container">
    {{> userPill name="home"}}
    {{> userPill name="about"}}
    {{> userPill name="profile"}}
  </div>
</template>

然后您可以按照与上面相同的方式定位容器：

.user-pill-container {
  border: 1px solid black;
}
点赞