在Less中覆盖mixin

Question

我正在开发一个Angular应用程序，它使用NG-ZORRO作为组件。 我需要自定义按钮的外观，我想通过自定义预定义的Less函数/ 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

也许这很简单！

嗯，显然它就是这么简单

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

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

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