如何用angular css组件设计ng-zorro组件的样式？

/* styles.css */
.ant-btn {
  background-color: #1890ff;
  border-color: #1890ff;
}

.ant-btn:hover {
  background-color: #40a9ff;
  border-color: #40a9ff;
}

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

/* app.component.scss */
:host ::ng-deep .ant-btn {
  background-color: #ff4d4f;
  border-color: #ff4d4f;

  &:hover {
    background-color: #ff7875;
    border-color: #ff7875;
  }
}

npm install ng-zorro-antd --save
npm install less less-loader --save-dev

"styles": [
  "src/styles.less"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "node_modules/ng-zorro-antd"
  ]
}

@import "~ng-zorro-antd/ng-zorro-antd.less";

// 覆盖主题变量
@primary-color: #1890ff;

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None // 关闭样式封装
})
export class AppComponent {}