CSS 来自父组件不应用于子组件 Angular 9

Question

I have a component nested within a component with a bunch of HTML. In the parent component, I am trying to have the CSS written there apply to the nested component.

Example:

/* this is within the parent css */
button{
    color: red;
}

But then in the child the component's button is not red.

I am linking the components like so:

<!-- this is within the HTML of the parent -->
<div>
    <nested-component></nested-component>
</div>

Answer 1

You can prepend :host::ng-deep to achieve this.

:host ::ng-deep button {
    color: red;
}