CSS Angular2-如何將CSS應用於一個組件內的嵌套元素？

我與HTML一個角度成分如下：CSS Angular2-如何將CSS應用於一個組件內的嵌套元素？

<!-- dynamic content generated runtime --> 
<div class="test"> 
     <div class="testinside"> 
     HELLO 
     </div> 
    </div>

現在我想要的風格爲[生成動態內容]部分一類，所以我SCSS如下：

:host { 

    display: inline-block; 
    vertical-align: middle; 

    > .test > .testinside { 
    color: red; 
    } 

    > select { 
    display: inline; 
    } 

    > .combobox-container > .input-group { 
    color: red; 
    } 
}

[.combobox-container> .input-group]是動態內容的css設置。

然而，似乎對動態內容的CSS不受影響:(（靜態內容的CSS是OK）

的動態內容如下：

<common-combobox _ngcontent-hdj-67="" ...> 
<!-- dynamic content generated runtime --> 
    <div class="combobox-container combobox-selected"> 
    <input type="hidden" name="" value="2"> 
    <div class="input-group"> 
     <input type="text" autocomplete="off" placeholder="Anrede" class="combobox"> 
     <span class="input-group-addon dropdown-toggle" data-dropdown="dropdown"> <span class="caret"></span> <span class="glyphicon glyphicon-remove"></span> </span> 
    </div> 
    </div> 

    <div _ngcontent-hdj-35="" class="test"> 
    <div _ngcontent-hdj-35="" class="testinside"> 
     HELLO 
    </div> 
    </div> 
</common-combobox>

誰能幫助我展現點我錯過了嗎？

來源

2017-02-10 doannx

如何添加動態內容？我的意思是使用什麼？ – micronyks

我使用一個UI庫從https://github.com/danielfarrell/bootstrap-combobox – doannx

使用:host /deep/強制子組件使用樣式

https://angular.io/docs/ts/latest/guide/component-styles.html#!#-deep-

這裏是角Live example，看到hero-detail.component.css

更新從@Joseph布里格斯

陰影刺穿後裔組合子已被棄用，支持正在從主流瀏覽器和工具中刪除。因此，我們計劃放棄對Angular的支持（所有3個/ deep /，>>>和:: ng-deep）。在此之前:: ng-deep應該更適合與工具的更廣泛的兼容性。

總之，::ng-deep將取代:host /deep/，直到下一次通知來自Angular。

來源

2017-02-10 08:17:49

謝謝，它的工作！ – doannx

更新： '陰影刺穿後代組合器已被棄用，並且支持正在從主流瀏覽器和工具中移除。因此，我們計劃在Angular中（對於/ deep /，>>>和:: ng-deep的所有3個）放棄支持。在此之前:: ng-deep應該是與工具更廣泛的兼容性的首選。' –

謝謝@JosephBriggs，將更新到我的答案。 –

設置viewEncapsulation該組件None。

來源

2017-02-10 08:10:04

謝謝@Suren，但ViewEncapsulation.None違反我們的項目編碼規則:( – doannx

CSS Angular2-如何將CSS應用於一個組件內的嵌套元素？

回答

相關問題