工作记录—ng-zorro 样式调试

一、修改默认ng-zorro样式失效

在 angular7 和 ng-zorro 7.x 搭建的项目中调试样式时，发现ant-design组件的默认样式能在chrome中修改，但是在项目中调整后，则无法生效。

通过加类名 => 加id名 => !important增加权重， 样式皆不能正常表现，且chrome检查器中没有样式被覆写的记录

上网查询后，发现是因为自定义的样式会被ant-design的样式忽略，导致不能覆写
解决方法有以下三种:

1. 类名等选择器前加 ::ng-deep 修改全局默认样式。给元素加类名可避免污染全局样式。

   1 2 3 4 5

   .card-box { ::ng-deep .ant-card-body { padding: 0 1.5rem; }

2. 类名等选择器前加 :host ::ng-deep 修改当前组件的默认样式
3. :root 匹配根目录中的对应元素，慎用此方法，会导致全局样式。 可给需要修改的元素加类名再配合:root。

二、 下拉框选项中的样式修改

需要给select添加nzDropdownClassName属性：

1
2
3
4

<nz-select nzDropdownClassName="custom-select-layout">
   <nz-option *ngFor="let xx of xxx" [nzValue]="xx" [nzLabel]="xx.name">
   </nz-option>
</nz-select>

1
2
3
4
5
6
7
8
9
10

:root .custom-select-layout {
  .ant-select-dropdown-menu-item-active {
    background-color: xxx;
  }

  .ant-select-dropdown-menu-item {
    font-family: 'Montserrat', 'Arial';
  }

}