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

我想弄清楚如何在home.component.css中寫入CSS，但它不工作。：主機（身體）不工作在角

我試圖

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

也

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

，但不工作。

我可能做錯了什麼？

來源

2017-09-02 Elaine Byene

你想要添加'背景顏色？ –

試試'：host {background-color：#eee; }' – Faisal

@ AngularInDepth.com在home.component.html –

您可以在組件視圖外的樣式元素既不與: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

來源

2017-09-02 13:20:00

這也不起作用。我正在嘗試將CSS應用於此特定頁面的''標記。 –

@ElaineByene，我已經更新了我的答案 –

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

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

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

來源

2017-09-02 22:59:13

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

回答

相關問題