是否能够结合使用[ngStyle]和::ng-deep？

Question

我希望构建一个可以在运行时完全设置主题的应用程序。因此，我想在我的根app.component上设置全局设置，例如字体大小、颜色、背景颜色等。目前，我使用预定义的CSS类来实现：

     // CSS
    .font-size-16::ng-deep { font-size: 16px; }

    // TS
    fontSizeClass = 'font-size-16'

    // HTML
    <div [ngClass]="fontSizeClass"></div>

将fontSizeClass字符串更改为另一个类可用于深度设置我的应用程序的样式。但是这种解决方案完全不具有动态性。实际上我想要的是通过[ngStyle]来设置font-size，同时保持ng::deep功能。

这是否可能？

使用JavaScript和Redux完全实现主题的原因是什么呢？

提前致谢！

- vachee

---

你有没有找到解决方案？ - Smaïl Hammour

Answer 1

尝试使用 Angular Material 单选按钮，如果您想使单选按钮的边框透明。请注意保留 HTML 标签。

1. in HTML:

   [ngClass]="{'**transparentBorder**': "--Here yours condition---"}"
   

2. in css:

a. 您需要将我们在HTML中使用的transparentBorder添加到： b. 在CSS开头添加::ng-deep c. 在Chrome Dev Tools中找到Angular Material使用的所有类。在这种情况下，有两个选项：1. 如果单选按钮被选中，2. 未被选中

结果：

当单选按钮被选中时，这是类 我们需要将我们的class transparent-border 添加到 Angular Material 的类中。

::ng-deep .mat-radio-button.**transparentBorder**.mat-primary.mat-radio-checked .mat-radio-outer-circle {
  border-color: transparent;
}

这是当单选按钮未选中时的类。

::ng-deep .mat-radio-button.**transparentBorder**.mat-primary .mat-radio-outer-circle {   border-color: transparent; }

祝你好运

- Yoni Ayalon