Possibility to set all Material's CSS in a specific CSS layer

[ositaka]

Which @angular/* package(s) are relevant/related to the feature request?

No response

Description

Hello everyone,

After some research, I haven't found any way to assign the default Material components' injected CSS (from <style> tags) to a specific CSS layer (e.g., a layer named "material").

While I can configure a default Material CSS theme in a specific CSS layer, the inline styles injected by the components aren’t placed in that layer. This limitation forces me to rely on the !important keyword to override these styles, which isn’t ideal.

Is there a recommended approach or a potential enhancement to allow these inline styles to be assigned to a specific CSS layer by default?

Here’s an example for reference:

Thank you for the help!

Proposed solution

Introduce a configuration option that allows developers to specify a CSS layer for the injected Material components' styles. Instead of inserting these styles without layer information, the library would wrap them in a <style> tag with the appropriate CSS layer attribute (e.g., layer="material"). This change would enable more predictable cascading behavior and simplify style overrides by eliminating the need for !important.

Alternatives considered

• Overriding with !important: Currently, developers rely on using !important to override the default styles. However, this approach can lead to maintenance issues and unintended side effects.
• Manual style injection: Developers could manually override or inject additional CSS rules after the default styles load, but this solution is error-prone and lacks scalability.
• Custom style injection: Overriding the internal style injection mechanism might be possible, but this would be a hacky workaround that could break with future updates.