Angular's component-level CSS encapsulation.
This unique feature ensures that each component maintains its own separate styling, even if multiple components share the same class names. This independence remains regardless of the HTML structure in which the components are nested.
However, there may be instances where you need to customize the styling of a child component.
There are various methods to achieve this. Let's consider an example where compB contains compA.
::ng-deep
:host {
// ... Other styles
::ng-deep compA {
// ... Custom compA styles
}
}
Explanation: The ::ng-deep selector enables sharing of CSS styles across different components within specific boundaries (wrapper selectors). Any styles defined under ::ng-deep compA will apply to all elements within compA.
WARNING: Using ::ng-deep directly in a component's styling sheet without a wrapper can cause the styles it contains to affect the entire application rather than just the current component. It is recommended to enclose it within a :host selector.
Global style sheets
To apply custom styles at the application level, you can either modify the base styles.css file or create new CSS files to include during application initialization (outside of Angular, such as with a <link> tag in index.html).
These global styles come in handy when there is a need to override common styles throughout the application without interfering too much with individual component stylesheets. However, it may not always be considered best practice.
Add new component stylesheets in styleUrls array within the @Component decorator.
While this approach may not be suitable for every scenario, it is worth exploring.
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css', '../styles/background.css', '../styles/input.css', '../styles/container.css' /* ... other stylesheets here */]
})
Implementing this method allows for centralizing common styles while maintaining flexibility within specific components. You can easily add and organize styles based on the component's requirements.