Как применить стиль css к шаблону в метеоре

Question

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

Вышеупомянутый шаблон используется для автозаполнения метеор. Мне нужна вертикальная полоса прокрутки на контейнере, который находится вокруг списка, поэтому пользователь может прокручивать эти значения. Поблагодарили бы за любую помощь.

Благодаря

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