Как изменить стиль сетки в угловых 6

Question

У меня есть этот стиль:

.main-panel{
  height: 100%;
  display: grid;
  grid-template-rows: 4rem auto;
  grid-template-columns: 14rem auto;
  grid-template-areas: 'header header''sidebar body';
}

Теперь, как мне изменить стиль сетки-шаблона-области в угловых

например:

grid-template-columns: 14rem auto;
grid-template-areas: 'header header''sidebar body';

to >>>

grid-template-columns: 100%;
grid-template-areas: 'header header''sidebar sidebar';

Не поддерживает угловые стили из сетки CSS ???? !!!!!

Answer 1

Вы можете создать два класса и класс динамического изменения элемента. пример css

.A{
grid-template-columns: 14rem auto;
grid-template-areas: 'header header''sidebar body';
}

.B{
grid-template-columns: 100%;
grid-template-areas: 'header header''sidebar sidebar';
}

в HTML

<div [ngClass]="{
 'A': isA,
 'B': isB
}"></div>

Answer 2

Можете ли вы поделиться своим HTML? Возможно, вам нужно настроить таргетинг на: host / deep /

вот так:

Что означает: host / deep / selector?