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 选择器。 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

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

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

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

Answer 2

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

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

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

Clarity Wizard - Add a css-selector to a custom wizard button

css

vmware-clarity

clarity

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

Clarity Wizard - Add a css-selector to a custom wizard button

css

vmware-clarity

clarity

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