时间戳

首页 > 解决方案 > NG-ZORRO - 覆盖库中的默认样式

angular - NG-ZORRO - 覆盖库中的默认样式

问题描述

我有一个 Angular 库，由 ng-packagr 打包，它包装了NzTableComponent.
例如，我需要通过覆盖默认样式来提供自定义样式

@table-border-radius-base: 5px;
@table-header-bg: gray;

但是，将其放在组件.less文件中

table-custom.component.less

@import 'ng-zorro-antd/table/style/index';
@import 'ng-zorro-antd/table/style/size';

@table-border-radius-base: 0;
@table-header-bg: black;

似乎它不起作用。任何想法？

标签： angularangular-libraryng-zorro-antd

解决方案

ng-zorro-antd/table/style/size您导入的，本身的导入../../style/themes/index和您尝试覆盖的变量在后者中定义。这意味着您所做的变量的新定义将被忽略，因为它们是在类中使用它们之后出现的。

在这里，您没有太多选择。* 选项 1：您复制库的 less 文件并将您希望的新值放入这些复制的文件中。问题是您不会自动利用库的演变。

  • 选项 2：您保持代码原样，在较少的文件中仅覆盖您感兴趣的类（例如使用 ::ng-deep）。例如，它看起来像这样：
@import 'ng-zorro-antd/table/style/index';
@import 'ng-zorro-antd/table/style/size';

@table-border-radius-base: 0;
@table-header-bg: black;

::ng-deep table {
 border-radius: @table-border-radius-base @table-border-radius-base 0 0; // the property will be overriden by the variables you have defined
}
...

关于::ng-deep: 文档说它已被弃用，即使它仍然大量使用。为避免此问题，如果您有一个不只与特定组件相关的通用样式文件，您可以将要覆盖的样式放入此文件中，而无需::ng-deep.

推荐阅读