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

您可以共享HTML吗？也许您需要定位：host / deep /

那样：

What does :host /deep/ selector mean?

Answer 2

您可以创建一个元素的两个类和动态更改类。例 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>

如何更改角度6中的样式网格

2 个答案: