Angular: Override CSS of other component - html

Question

I am fairly new to Angular and HTML.
I have two different components, let's say componentAand componentB, both with their repsective .html, .css and .ts files.
In componentA.css, I define some styles, e.g.:
.compA-style {
font-size: 20px;
}
Now in componentB.hmtl, I am using componentA's directive:
<compA></compA>
How can I now change the styles of componentA inside the css file of componentB, without changing the style inside componentA?
Note: I cannot change the style of componentA because I want to use the unmodifed style inside other components, I only want to change for the componentB.
Note: I already tried !important inside componentB.css, i.e. I tried this one:
.compA-style {
font-size: 30px !important;
}
And then in componentB.html:
<compA class=".compA-style"></compA>
But that didn't work.

Answer 1

Angular encapsulates CSS at component level.
This means that even if you have multiple CSS classes with the same name across multiple components, each of those components will use its own class, regardless of the DOM structure.
There are times when you might want to modify a child component styling, though.
You can do this in multiple ways. Let's assume compB contains compA.
::ng-deep
:host {
// ... Other styles
::ng-deep compA {
// ... Custom compA styles
}
}
Explanation: ::ng-deep selector provides cross-component visibility of CSS given its boundaries (wrapper selectors). Whatever you write within ::ng-deep compA will be shared with everything in compA.
WARNING: If you use ::ng-deep at base level in a component styling sheet (without a wrapper), the styles it contains will be spread both up and down across the application (NOT only within current component) and they load whenever the component loads. That is why it's usually wrapped into a :host selector.
Global style sheets
You can write custom styles in application base level styles.css file or create new css files to include at application load (outside Angular environment, for example with a <link> tag in index.html).
They are useful when you have a bunch of styles to overwrite that are the same across the application and don't want to mess with specific component stylesheets too much. Might not always be a good practice.
Add new component stylesheets in styleUrls array in the #Component decorator.
This might not necessarily apply to your case, but it's worth mentioning.
#Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css', '../styles/background.css', '../styles/input.css', '../styles/container.css' /* ... other stylesheets here */]
})
This is a good approach that helps keeping common styles in a single place while not making them global. You can add whatever styles you need to the specific component and split them as needed.

Answer 2

How can I now change the styles of componentA inside the css file of componentB, without changing the style inside componentA?
There is only way to add styles without edit component-A directly.
on componentB.css
:host ::ng-deep compA-style {
font-size: 30px !important;
}
on componentA.html
<compA class="compA-style"></compA>
NOTE: This functionality is deprecated.
Checkout docs ng-deep.
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep