gpt4 book ai didi

angular - 将 css 样式应用于 Angular 2 应用程序中的所有组件

转载 作者:太空狗 更新时间:2023-10-29 17:16:18 26 4
gpt4 key购买 nike

我有非常基本的、可重复使用的 css 规则,例如:

.ng-invalid {
border-left: 5px solid #a94442;
}

.ng-valid {
border-left: 5px solid #42A948;
}

我想将这些重新用于我的所有组件。如果我将它放在我的根 AppComponent 中,它是由 Angular 引导的,那么除了 AppComponent 之外,我的应用程序中的任何其他组件都无法识别它。

我一定遗漏了一些非常明显的东西。

最佳答案

在将 CSS 添加到 <head> 之前,Angular 会向您的组件添加唯一类并重写添加到组件的 CSS 选择器以仅匹配该组件的唯一类。 .这是为了模拟 shadow DOM 样式封装。

你可以通过以下方式解决它

  • 设置encapsulation: ViewEncapsulation.None这可以防止重写禁用封装的组件的样式

  • 将 CSS 添加到 index.html直接地。 Angular 不会重写未添加到组件中的 CSS。

  • 使用“阴影穿刺 CSS 组合器”::ng-deep someSelector { ... }这也使 CSS 忽略添加到组件的独特类。

关于angular - 将 css 样式应用于 Angular 2 应用程序中的所有组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36633483/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com