NG-ZORRO - переопределить стиль по умолчанию в библиотеке - PullRequest
Новая
       39

NG-ZORRO - переопределить стиль по умолчанию в библиотеке

0 голосов
/ 20 июня 2019

У меня есть библиотека 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;

кажется, что это не работает.Есть идеи?

1 Ответ

1 голос
/ 20 июня 2019

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.

...