NG-ZORRO -重写库中的默认样式

Question

我有一个由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:复制库的较少文件，并将希望的新值放入这些复制的文件中。问题是你不会自动利用图书馆的进化。

• 选项2:保持代码的原样，在较少的文件中，只覆盖您感兴趣的类(例如使用：：ng-深度)。例如，它应该如下所示：

@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的情况下将要重写的样式放入此文件中。