代码之家 › 专栏 › 技术社区 › LppEdd

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

ng-zorro-antd angular-library angular

0

LppEdd · 技术社区 · 7 年前

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;

好像不管用。有什么想法吗?

0 回复 | 直到 7 年前

1

Hay OUE 7 年前

ng-zorro-antd/table/style/size 你进口的,本身就是进口 ../../style/themes/index

你没有很多选择。 *选项1:复制库中较少的文件,并将所需的新值放入这些复制的文件中。问题是你不能自动利用图书馆的发展。

选项2:保持代码原样,在较少的文件中只覆盖您感兴趣的类(例如使用::ngdeep)。例如,如下所示:

@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 :文档中说,即使它仍在大量使用,它也被弃用。若要避免此问题,如果您的常规样式文件不与特定组件相关,则可以将要替代的样式放入此文件中,而不需要