Is there a way to prevent Angular Child components from inheriting their parent's styles, specifically opacity?
I have a form wrapper positioned on top of the page as shown below:
import {Component, EventEmitter, Output} from "@angular/core";
@Component({
selector: 'new-student-form-wrapper',
templateUrl: './new-student-form-wrapper.component.html',
styleUrls: ['./new-student-form-wrapper.component.scss']
})
export class NewStudentFormWrapperComponent {
@Output() public onNewStudentFormClose: EventEmitter<void> = new EventEmitter<void>();
public newStudentFormCloseClicked(): void {
this.onNewStudentFormClose.emit();
}
}
::ng-deep {
.student-details-form {
opacity: 0;
}
}
.new-student-form-wrapper {
z-index: 50;
height: 100vh;
width: 100vw;
position: absolute;
background-color: white;
opacity: 0.8;
.c-pointer {
cursor: pointer;
}
}
<div class="new-student-form-wrapper p-4">
<mdb-icon class="c-pointer d-flex close-icon" (click)="newStudentFormCloseClicked()" fas icon="times"></mdb-icon>
<new-student-form></new-student-form>
</div>
There is a child component that contains the form behavior:
import {Component} from "@angular/core";
@Component({
selector: 'new-student-form',
templateUrl: './new-student-form.component.html',
styleUrls: ['./new-student-form.component.scss']
})
export class NewStudentFormComponent {
}
.student-details-form {
opacity: 1;
background-color: purple; /** Just for testing opacity*/
}
<div class="student-details-form md-form input-group d-flex flex-column">
<div class="form-header">
<h1>Hello</h1>
</div>
</div>
Even though I explicitly set the opacity of new-student-form.component to 0, it still inherits the container's 0.8 opacity rule.
https://i.sstatic.net/rw2DU.png
It seems like I am using ng-deep incorrectly, what would be the best approach to remove the opacity for the child? Is there an encapsulation method I can use to prevent the styles from leaking into another component?