你不应该使用::ng-deep，它已被弃用。在Angular中，从父组件中改变子组件样式的正确方法是使用封装(阅读下面的警告以了解其含义):

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

然后，你就可以修改组件的css，而不需要使用::ng-deep

.mat-sort-header-container {
  display: flex;
  justify-content: center;
}

警告:这样做将使您为该组件编写的所有css规则都是全局的。

为了将你的css的范围限制在这个组件和他的子组件上，在你的组件的顶部标签上添加一个css类，并把你的css“放在”这个标签里:

模板:

<div class='my-component'>
  <child-component class="first">First</child>
</div>,

Scss文件:

.my-component {
  // All your css goes in there in order not to be global
}

随着互联网的更新，我想到了一个解决方案。

首先是一些警告。

还是不要这么做。澄清一下，我不打算让子组件允许您对它们进行样式设置。SOC。如果你作为组件设计者想要允许这一点，那么你就拥有了更多的权力。 如果你的孩子没有生活在阴影中，那么这对你来说就行不通了。 如果你必须支持一个浏览器，不能有一个影子dom，那么这也不会为你工作。

首先，将子组件的封装标记为shadow，以便它在实际的shadow dom中呈现。其次，将part属性添加到希望允许父元素设置样式的元素中。在父组件样式表中，可以使用::part()方法进行访问

我举一个例子来说明，因为角。io /指导/组件样式:

阴影穿透的后代组合子已弃用，并已从主要浏览器和工具中移除支持。因此，我们计划在Angular中放弃对/deep/、>>>和::ng-deep的支持。在此之前，::ng-deep应该优先考虑与这些工具的广泛兼容性。

在app.component.scss上，导入您的*。如有需要，可使用SCSS。_colors。SCSS有一些常见的颜色值:

$button_ripple_red: #A41E34;
$button_ripple_white_text: #FFF;

对所有组件应用规则

所有具有btn-red类的按钮都将被样式化。

@import `./theme/sass/_colors`;

// red background and white text
:host /deep/ button.red-btn {
    color: $button_ripple_white_text;
    background: $button_ripple_red;
}

将规则应用到单个组件

app-login组件上所有具有btn-red类的按钮都将被样式化。

@import `./theme/sass/_colors`;

/deep/ app-login button.red-btn {
    color: $button_ripple_white_text;
    background: $button_ripple_red;
}

这对我来说很有效

在父组件中:

<child-component [styles]="{width: '160px', borderRadius: '16px'}" >
</child-component>

截至目前(Angular 9)， Angular使用Shadow DOM将组件显示为自定义HTML元素。为这些自定义元素设置样式的一种优雅方法可能是使用自定义CSS变量。下面是一个通用的例子:

class ChildElement extends HTMLElement { constructor() { super(); var shadow = this.attachShadow({mode: 'open'}); var wrapper = document.createElement('div'); wrapper.setAttribute('class', 'wrapper'); // Create some CSS to apply to the shadow dom var style = document.createElement('style'); style.textContent = ` /* Here we define the default value for the variable --background-clr */ :host { --background-clr: green; } .wrapper { width: 100px; height: 100px; background-color: var(--background-clr); border: 1px solid red; } `; shadow.appendChild(style); shadow.appendChild(wrapper); } } // Define the new element customElements.define('child-element', ChildElement); /* CSS CODE */ /* This element is referred as :host from the point of view of the custom element. Commenting out this CSS will result in the background to be green, as defined in the custom element */ child-element { --background-clr: yellow; } <div> <child-element></child-element> </div>

从上面的代码中可以看到，我们创建了一个自定义元素，就像Angular为每个组件所做的那样，然后我们从全局作用域覆盖自定义元素阴影根中的背景颜色变量。

在Angular应用中，这可能是这样的:

parent.component.scss

child-element {
  --background-clr: yellow;
}

child-element.component.scss

:host {
  --background-clr: green;
}

.wrapper {
  width: 100px;
  height: 100px;
  background-color: var(--background-clr);
  border: 1px solid red;
}

也有同样的问题，所以如果你在scss/sass中使用angular2-cli，使用'/deep/'而不是'>>>'，最后的选择器还不支持(但适用于css)。