0

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

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

4

1 回答 1

1

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.

于 2019-06-20T12:44:50.230 回答