Angular 5编译期间未拾取CSS类


CSS classes not picked up during Angular 5 compilation

我在我的angular 5项目中使用了ag-grid。我正在尝试将CS??S类添加到单元格中。看了有关ag-grid单元格样式的大量文档后，我尝试使用cellClass和cellClassRules。

样式在scss文件中定义，例如：

1
.readonly-cell{ background-color: #cccccc; }

scss文件随后包含在组件中：

1
2
3
4
5
@Component({
  selector: 'app-volume',
  templateUrl: './volume.component.html',
  styleUrls: ['./volume.component.scss']
})

然后将类应用于列：

1
{headerName:'Power', field:'power', width:150, cellClass:'readonly-cell'}

网格本身运行正常。问题是power单元格不会改变颜色。当我在Firefox中检查呈现的HTML时，我可以看到该单元确实已将类readonly-cell应用于它们。但是样式详细信息未在"规则"面板上列出。

这使我认为在编译过程中未拾取类。我认为这不是ag-grid的问题，而是样式类的获取方式。

有什么方法可以解决为什么类和定义未包含在编译中的问题？

相关讨论

之所以会出现这种现象，是因为您要通过CSS规则定位的元素是在Angular组件之外生成的，并且Angular添加了特殊属性，因此组件CSS仅适用于该组件(而不适用于其子组件，即添加的任何DOM节点)在Angular外等)。您应该使用Angular并在与样式完全相同的组件中构建样式所需的所有HTML，或者禁用该功能。您可以使用ViewEncapsulation.None：

禁用它

1
2
3
4
5
6
@Component({
  selector: 'app-volume',
  templateUrl: './volume.component.html',
  styleUrls: ['./volume.component.scss'],
  encapsulation: ViewEncapsulation.None
})

或通过在样式表中使用/deep/，如此处所述：

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep