如何防止角度零部件样式替代传递到其他零部件?

您的问题是由::ng deep引起的,它将对所有人应用样式。mat输入。加载组件并注入样式后,为页面中的元素添加下划线。

如果确实要保留::ng deep组合符,可以添加:host选择器作为规则的前缀,该选择器将以宿主元素为目标,而不会将css泄漏到其他组件(子组件除外)

:host ::ng-deep .mat-input-underline
{
  display: none;
}

https://angular.io/guide/component-styles#host

以这种方式设置组件的样式,此样式不会泄漏到子组件。使用::ng deep-in:host,但与下面的操作完全相同。

:host {
        ::ng-deep p, .py-8 {
            margin: 0 !important;
        }
    }

我假设您正在使用Angular Cli生成组件。。。

您需要模仿 encapsulation 您的 Component . 尽管角度默认为“仿真”。(谢谢大卫纠正我的错误)。

简而言之 Emulated 允许组件使用全局样式,同时保留其本地样式。

@Component({
  selector: 'app-child-component',
  template: `<div class="parent-class">Child Component</div>`,
  encapsulation: ViewEncapsulation.Emulated
})

而且 ::ng-deep 旨在将风格从家长传递给孩子。因此,如果您试图阻止您的子元素采用其父母的样式,那么使用这种样式对您不利。

“/deep/”已被弃用,“:ng deep”是一种方式,但要小心。 有关详细信息,请查阅以下官方文件。

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep