Question

我有一个ng-packagr打包的Angular库，它包装了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-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-覆盖库中的默认样式

1 个答案: