Question

我尝试构建一个可以在运行时完全主题化的应用程序。因此，我想在我的根app.component上设置全局设置，如 font-size，color，background-color 等。现在我使用预定义的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

尝试一下使用角度材质单选按钮如果您想使单选按钮的边框=>透明

在HTML中：

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

在CSS中：

a。您将 transparentBorder （我们在HTML中使用的）添加到： b。在CSS的开头添加:: ng-deep C。在Chrome开发工具中找到Angular材质使用的所有类在这种情况下，有2个选项：1.如果选中了单选按钮，则2.未选中

结果：

这是选中单选按钮时的类 我们需要将我们的透明边框类添加到角形材质类中。

::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; }

祝你好运

是否可以组合[ngStyle]和:: ng-deep？

1 个答案: