css - 是否可以结合使用 [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字符串到另一个类适用于深度样式化我的应用程序。但是这个解决方案根本不是动态的。我真正想要的是设置 font-size通过 [ngStyle]但保留 ng::deep功能也一样。

那可能吗？

是否有理由不使用 JavaScript 和 Redux 完全实现主题？

提前致谢!

Answer 1

尝试这个
使用 Angular Material 单选按钮
如果你想让单选按钮的边框 => 透明

在 HTML 中:

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

在 CSS 中:

一种。您添加 透明边框 (我们在 HTML 中使用的):
湾在 CSS 开头添加::ng-deep
C。在 Chrome Dev Tools 中找到 Angular Material 使用的所有类
在这种情况下，有 2 个选项:1. 如果选中单选按钮，2. 未选中

结果:

这是选中单选按钮时的类
我们需要将我们的类透明边框添加到 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; }

祝你好运