css - Clarity Wizard - 将 CSS 选择器添加到自定义向​​导按钮

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

假设这会呈现带有 的标准button，type那么属性选择器将起作用。

button[type="custom-save"] {
  background: lightgreen;
}

<button type="custom-save">Save</button>

Answer 2

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

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

如您所见，这将呈现出来，您可以.my-custom-button button在 CSS 中使用该按钮作为目标。

<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>