Могу ли я изменить 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>

Здесь мой дочерний компонент также принимаетmax-width 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. Дочерний компонент будет корректироваться в соответствии с шириной контейнера, как вы хотите. Для 100% ширины покрытия используйте width: 100vw.

Answer 2

Попробуйте использовать vw css для настройки ширины элемента.Они относятся к 1% ширины области просмотра.

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