使用angular特殊选择器来修改当前组件样式
:host，::ng-deep
:host 表示选择当前的组件，只对当前这个组件起作用
:host .name {color:white; }
::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。
.leftRs ::ng-deep .material-icons {font-size: 44px;line-height: 50px;}
也可以这样使用，在当前组件里忽略层级关系
:host ::ng-deep .leftRs .material-icons {font-size: 44px;line-height: 50px;}
当修改ng-zorro-antd默认样式，直接修改不起作用，使用如下方式
注意： :host ::ng-deep 不能有父元素，直接写在样式表里才起作用
:host ::ng-deep .ant-tabs-ink-bar {background-color: red;}/*这种方式也可以*/:host /deep/ .ant-radio {display: none;}/*如果很多需要重写的样式，可以写成下面的方式*/:host /deep/ {.ant-tabs-bar {border-bottom: none;} .ant-tabs-nav .ant-tabs-tab-active {color: #fff;position: relative;z-index: 10;}}
ng-zorro-antd自适应高度写法
:host /deep/ {.ant-table-small {border: 1px solid #e5e5e5;border-radius: 0;height: calc(100% - 40px);// overflow: scroll;}.ant-tabs,.ant-table-wrapper {height: 100%;}.ant-tabs .ant-tabs-top-content.ant-tabs-content-animated {height: calc(100% - 80px);}}
设置表格中的文字超出宽度隐藏
<thead><tr><th [nzWidth]="'20%'">单据名称</th><th [nzWidth]="">摘要</th><th [nzWidth]="'15%'">发起人</th><th [nzWidth]="'10%'">发起时间</th></tr></thead>
:host /deep/ {/*设置表格固定宽度*/.ant-table table {table-layout: fixed;}}
设置td中的某一个居左或居右居中
.list th:nth-child(2) {text-align: left;}
设置ng-zorro-antd表格高度100%
/*.sckg-todo-container 是指table的外层div*/.sckg-todo-container > .ng-star-inserted {height: calc(100% - 60px);}.ant-table-wrapper {height: calc(100% - 40px)}
