修改NgAlain模板的nztab和st表格组件默认样式

修改angular Ng Alain模板的默认样式

在less文件中直接写样式是不起作用的&＃xff0c;想要更改模版自带的样式&＃xff0c;需要用 :host ::ng-deep {} 包裹样式代码。
例如&＃xff1a;如下代码可以调整nz-tab切换组件中间的距离。

:host ::ng-deep {.ant-tabs-large > .ant-tabs-nav .ant-tabs-tab {padding: 16px 40px;font-size: 16px;}
}


nz-tab切换组件的使用&＃xff1a;

根据index实现tab的切换

change(args: NzTabChangeEvent) {console.log(args.index, &＃39;******&＃39;);}


效果图对比&＃xff1a;

加样式前&＃xff1a;

加样式后&＃xff1a;

修改st表格的样式

:host ::ng-deep {.ant-table table {width: 100%;text-align: center;border-radius: 2px 2px 0 0;border-collapse: separate;border-spacing: 0;}.ant-table-thead > tr > th {color: rgba(23, 25, 155, 0.85);font-weight: bold;text-align: center;background: #fafafa;border-bottom: 1px solid #e8e8e8;-webkit-transition: background 0.3s ease;transition: background 0.3s ease;}.ant-table-bordered .ant-table-tbody > tr > td {// border: 1px solid #e8e8e8;text-align: center;}.ant-table {box-sizing: border-box;margin: 0;padding: 0;color: rgba(0, 0, 0, 0.85);font-variant: tabular-nums;line-height: 1.3;//设置表格的行高list-style: none;font-feature-settings: &＃39;tnum&＃39;;position: relative;font-size: 14px;background: #fff;border-radius: 2px;}
}