Angular：覆盖其他组件的 CSS

如何解决Angular：覆盖其他组件的 CSS

我对 Angular 和 HTML 还很陌生。

我有两个不同的组件，比如 componentA 和 componentB，它们都有各自的 .html、.css 和 .ts 文件。

在componentA.css中，我定义了一些样式，例如：

.compA-style {
    font-size: 20px;
}

现在在 componentB.hmtl 中，我正在使用 componentA 的指令：

<compA></compA>

现在如何更改 componentA 的 css 文件中 componentB 的样式，而不更改 componentA 中的样式？

注意：我不能改变componentA的样式，因为我想在其他组件中使用未修改的样式，我只想改变componentB。

注意：我已经在 !important 中尝试过 componentB.css，即我尝试过这个：

.compA-style {
     font-size: 30px !important;
}

然后在 componentB.html 中：

<compA class=".compA-style"></compA>

但这没有用。

解决方法

现在如何改变componentB的css文件中componentA的样式，而不改变componentA内部的样式？

没有直接编辑component-A的方式添加样式。

在componentB.css

:host ::ng-deep compA-style {
  font-size: 30px !important;
}

在componentA.html

<compA class="compA-style"></compA>

注意：此功能已弃用。

结帐文档 ng-deep。 https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Angular 在组件级别封装 CSS。

这意味着即使您在多个组件中有多个同名的 CSS 类，每个组件都将使用自己的类，而不管 DOM 结构如何。

有时您可能想要修改子组件样式。

您可以通过多种方式执行此操作。让我们假设 compB 包含 compA。

::ng-深

    :host {
        // ... Other styles

        ::ng-deep compA {
            // ... Custom compA styles
        }
    }

说明：::ng-deep 选择器在给定其边界的情况下提供 CSS 的跨组件可见性（包装器选择器）。您在 ::ng-deep compA 中写的任何内容都将与 compA 中的所有内容共享。

警告：如果您在组件样式表（没有包装器）的基础级别使用 ::ng-deep，它包含的样式将在整个应用程序中上下传播（不是仅在当前组件内）并且它们在组件加载时加载。这就是为什么它通常被包裹在一个 :host 选择器中。

全局样式表

您可以在应用程序基础级别 styles.css 文件中编写自定义样式或创建新的 css 文件以在应用程序加载时包含（在 Angular 环境之外，例如在 <link> 中使用 index.html 标记） .

当您有一堆样式要覆盖在整个应用程序中相同并且不想过多地弄乱特定组件样式表时，它们非常有用。 可能并不总是好的做法。

在 `styleUrls` 装饰器的 `@Component` 数组中添加新的组件样式表。

这可能不一定适用于您的情况，但值得一提。

    @Component({
        selector: 'app-main',templateUrl: './main.component.html',styleUrls: ['./main.component.css','../styles/background.css','../styles/input.css','../styles/container.css' /* ... other stylesheets here */]
    })

这是一种很好的方法，有助于将通用样式保存在一个地方，同时又不会使它们成为全局样式。您可以为特定组件添加您需要的任何样式，并根据需要拆分它们。