我可以从子组件更改父组件的css吗答案

【问题标题】：Can I change the css of a parent component from a child component我可以从子组件更改父组件的css吗
【发布时间】：2018-12-04 08:16:15
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

可以使用 vw css 语法。子组件将根据需要根据容器的宽度进行调整。对于 100% 宽度覆盖，请使用 width: 100vw。

【讨论】：