如何将 CSS 样式应用于流星中的模板答案

【问题标题】：How do I apply a css style to a template in meteor如何将 CSS 样式应用于流星中的模板
【发布时间】：2014-12-06 20:26:11
【问题描述】：

<template name="userPill">
    <span>{{Zipcode}}</span>
    <span>{{City}}</span>
</template>

上面的模板用于流星自动完成。我需要的是列表周围容器上的垂直滚动条，因此用户可以滚动浏览这些值。将不胜感激任何帮助。

谢谢

【问题讨论】：

标签： meteor meteor-blaze

【解决方案1】：

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;
}

【讨论】：

我这样做了，但后来这种样式应用于列表中的每个项目。我需要的是将样式应用于它周围的容器。