When working on my Angular project, I have implemented some CSS styling in the global style.css file located at src/style.css. However, there are instances where I need to modify certain styles within a specific component only. Currently, I am able to achieve this by using ::ng-deep. The drawback is that any changes made to the global style from within the child component using ::ng-deep also affect the styling in global.scss, impacting other components unintentionally.
The CSS code declared in Src/Style.css is as follows:
.main-content {
width: 100%;
padding: 24px;
}
In my individual component, I use the following style in the component's css file :
::ng-deep .main-content {
padding: 24px 0;
}
At this point, I am seeking a solution to alter the global styling from a child component and confine that change strictly within that component's scope.