在 Less 中覆盖 mixin

Question

我正在开发一个 Angular 应用程序，它使用 NG-ZORRO 作为组件。
我需要自定义按钮的外观，我想通过自定义预定义的 Less functions/mixins.

例如，我需要覆盖这个 mixin 定义
node_modules/ng-zorro-antd/button/style/mixin.less

// Base styles of buttons
// --------------------------------------------------
.btn() {
  position: relative;
  display: inline-block;
  font-weight: @btn-font-weight;

  ...

  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    > * {
      pointer-events: none;
    }
  }

特别是 &.disabled 部分。
我显然可以使用

导入它

@import '~ng-zorro-antd/button/style/mixin';

但我不知道如何覆盖它。也许它很简单！

Answer 1

Maybe it's dead simple!

嗯，显然就是这么简单

.btn() {
  &.disabled,
  &[disabled] {
    cursor: default;
  }
}

它在您的自定义 .less 文件中，该文件也在 angular.json 中声明，例如

"styles": [
   ...
   "src/main/webapp/assets/css/styles_zorro.less"
],

在 Less 中覆盖 mixin

Override mixin in Less

less

angular