如何在角度 6 中更改样式网格答案

【问题标题】：how change style grid in angular 6如何在角度 6 中更改样式网格
【发布时间】：2018-09-02 12:23:59
【问题描述】：

我有这种风格：

.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 网格的样式吗？？？？？？！！！！！！

【问题讨论】：

标签： css angular grid

【解决方案1】：

你能分享你的 HTML 吗？也许你需要定位 :host /deep/

这样：

What does :host /deep/ selector mean?

【讨论】：

【解决方案2】：

你可以创建两个类，一个元素的动态变化类。例子

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

【讨论】：