我可以从子组件更改父组件的CSS吗？

Question

app.component.html

<div class="container main-area">
<app-header></app-header>
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>

global.css

.container{
max-width : 1022 px;
}

child.component.html

<div class="media-area">
<media-area></media-area>
</div>

在这里，我的子组件也采用了来自app.component.html容器的最大宽度1022px

我该如何覆盖并创建

.media-area{
width: 100%; (it should take full screen width and not the parent container width)
}

除此组件外，所有其他组件都需要容器宽度为1022px

Answer 1

尝试使用 vw css单位设置元素的宽度。这些相对于视口宽度的1％。

.media-area{
width: 100vw; /* = 100% width of viewport/the browser window size */
}

Answer 2

可以使用 vw CSS语法。子组件将根据需要调整容器的宽度。要获得100％的宽度覆盖率，请使用width: 100vw。