css - Clarity Wizard - 将 css-selector 添加到自定义向​​导按钮

Question

我有一个带有以下自定义向导按钮的向导:

<clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button> 
<clr-wizard-button [type]="'previous'">Previous</clr-wizard-button>
<clr-wizard-button [type]="'next'">Next</clr-wizard-button>
<clr-wizard-button [type]="'custom-save'">Save</clr-wizard-button>

现在我想使用自定义颜色为 custom-save 类型的按钮设置样式，为此，我需要应用一个 css-selector。 attr.class 将不起作用。

实现此目标的最佳方法是什么？

编辑:自定义保存按钮的格式化 html 输出:

<clr-wizard-button class="clr-wizard-btn-wrapper" _nghost-c5="" ng-reflect-type="custom-save" ng-reflect-disabled="false" aria-hidden="false">
  <button _ngcontent-c5="" class="btn clr-wizard-btn" type="button">
  Speichern
  </button>
</clr-wizard-button>

Answer 1

只需在您的 ClrWizardButton 上放置一个自定义类，它就会为您呈现。

<clr-wizard-button [type]="'custom'" class="my-custom-button">Cancel</clr-wizard-button> 

这将如您所见呈现，您可以在 CSS 中使用 .my-custom-button button 定位按钮。

<clr-wizard-button class="my-custom-button clr-wizard-btn-wrapper ng-star-inserted" _nghost-c1="" ng-reflect-type="custom-previous" aria-hidden="false">
  <button _ngcontent-c1="" class="btn clr-wizard-btn btn-outline clr-wizard-btn--secondary" type="button">Custom</button>
</clr-wizard-button>