：主機（身體）不工作在角

Question

我想弄清楚如何在home.component.css中寫入CSS，但它不工作。

我試圖

:host-context(body) 
    { 
    background-color: #eee; 
    } 

也

:host() body 
    { 
    background-color: #eee; 
    } 

，但不工作。

我可能做錯了什麼？

Answer 1

您可以在組件視圖外的樣式元素既不與:host也不與:host-context。你需要使用ViewEncapsulation.None。

如果您希望body僅在加載home組件的路由時纔有一些背景，則可以執行以下操作。您可以創建一個包裝組件，該組件將使用ViewEncapsulation.None對內容進行樣式化，該內容將包含內部home.component，以便HomeComponent的樣式仍封裝在HomeComponent內。

@Component({ 
    encapsulation: ViewEncapsulation.None, 
    template: `<home-component>...`, 
    styles: [`body { background-color: #eee; }...`] 
}) 
export class WrapperComponent {} 

routes = [ 
    { 
     path: 'home', 
     component: WrapperComponent 

Answer 2

使用ViewEncapsulation.None造成大規模css衝突，特別是如果兩個組件具有相同的class ES並相互嵌套。 （相信我，我一直在那裏）。試試這個解決方案，它爲我工作。

// NO spaces between `>>>`. I.E. IntelliJ auto format with spaces 
 
:host() >>> body 
 
    { 
 
    background-color: #eee; 
 
    }

您需要>>>迫使組件使用由父組件，而不是自己的css文件的造型提供css。