如何从子组件更改<body>标签样式？

Question

我在index.html中有这个:

<body class="light-gray">
    <app-root></app-root>
    <div id="preloader">
        <div></div>
    </div>
</body>

在app-root中我有这个:

<laylout></laylout>

在内部布局我有一个组件,scss我想在索引上更改正文.任何建议我怎么能这样做？

.light-gray{
    background: red!important;
}

我试过,:host但这不是主要的父母我需要的东西::host :host :host.东道主主持人:)

Answer 1

使用:: ng-deep,如下所示:

CSS

::ng-deep .light-gray{
  background-color: red;
}

使用ViewEncapsutation.None:

CSS

.light-gray{
    background-color:red
}

课程:

import { ViewEncapsulation } from '@angular/core';
...
@Component({
...
encapsulation: ViewEncapsulation.None

组件样式受到保护，不会渗透到其他组件中。封装定义了组件的样式是否可以影响整个应用程序，反之亦然。它可以有三个值， None 告诉 Angular 组件 css 中设置的样式可以传播回主 HTML (2认同)