我可以從子組件更改父組件的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>

這里我的子組件也是最大寬度為1022px，來自app.component.html的容器

我怎樣才能覆蓋它並制作它

.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 。