如何將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; 
}