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

Question

我有一个 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;

似乎没有用。有什么想法吗？

Answer 1

您导入的

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

中使用之后出现的

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

选项 2：保持代码不变，在 less 文件中只覆盖您感兴趣的类（例如使用 ::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.

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

NG-ZORRO - override default style in library

angular

angular-library

ng-zorro-antd