是否可以设置 Mat-Checkbox 样式以显示 X 而不是复选标记？

Question

尝试使用 Angular Material <mat-checkbox> 实现一项功能，如果用户单击 Yes 按钮，它会显示一个复选标记。如果用户点击 No 按钮，它会显示一个 X。我觉得 Angular Material 官方指南对此有点含糊。

我尝试在 mat-checkbox-background class 中添加新的 'X' svg 作为内容，但仅适用于封装。我也不能在全局中添加，因为我在其他组件中使用了 <mat-checkbox> too.I 只希望它应用于一个组件。

 .mat-checkbox-background{
     content: url(/assets/icons/cancel_checkbox.svg) !important;
  }

请给点建议谢谢！

注意：不想使用封装，因为它会影响其他样式。

Answer 1

如果我没看错，您想在未选中时显示 'X'。在这种情况下，下面的 CSS 会有所帮助：

mat-checkbox.cross {
  .mat-checkbox-background {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23ff4081'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z'/%3E%3C/svg%3E");
    background-position: center;
    background-size: contain;
  }
}

您需要将 class 与 <mat-checkbox> 一起使用：

<mat-checkbox class="cross">...</mat-checkbox>

我还创建了一个 stackblitz：https://stackblitz.com/edit/angular-gyykpy?file=src/styles.scss

是否可以设置 Mat-Checkbox 样式以显示 X 而不是复选标记？

Is it possible to style Mat-Checkbox to show an X instead of checkmark?

html

angular-material

angular