Isolate Third-Party Overrides in an Overrides Partial

When a third-party library exposes no custom-property hook, you must override its styles — but those overrides are quarantined, never mixed into your own component code. Each component that needs them gets a sibling _ComponentName.overrides.scss:

• wrapped in @layer overrides (declared last, so it beats @layer components),
• scoped inside a wrapper class unique to the component,
• token values only — no raw hex, no magic numbers,
• !important only when the library uses it internally or injects unlayered styles (see Unlayered CSS Beats Layered CSS) — always with a comment naming which library class forces it.

A single styles/_overrides.scss imports every override file, giving the layer app-wide authority without scattering @layer declarations.

Why quarantine: it keeps the component's own stylesheet clean and !important-free, so the only place "ugly" cascade fights live is one clearly-labeled file per library. This is the escape hatch that lets the rest of the codebase ban !important and ::ng-deep outright — the first choice is always the library's own custom-property API; the overrides partial is the fallback when none exists.

Source: css-conventions skill §12.