如何根据路由更改Angular Material V19组件颜色，并在单个SCSS文件中管理所有颜色？ 我的项目中使用了Angular Material V19（MDC）以及我的项目中的自定义角度组件（例如Header.component.ts）。在这些组件中，我经常使用Mat-Button等材料组件，但是W ...

Question

中，同一header.com.ponent应该具有绿色背景，并且manage-button应该是白色的。

我的要求：

风格应根据路由进行更改。

应在单个SCSS文件中定义所有特定路线的颜色，以便于维护。
• 有些样式会影响自定义组件，例如header.component，一些样式适用于材料组件，例如带有自定义类的Mat-button（例如，manage-button）。
我的问题：

处理定制组件 +材料组件的基于路由的样式的最佳实践是什么？

我应该在这样的设置中将材料主题API与我自己的自定义组件样式结合在一起？

• to to to to the to的tag tag tag tag tag的角度组件：
材料按钮样式

准备就绪自定义并使用以下代码，以基于组件添加样式，以下是其外观的示例：

styling

• 我们使用

@use '@angular/material' as mat;

:host ::ng-deep {
  @include mat.button-overrides((
    filled-container-color: orange,
    filled-label-text-color: red,
  ));
}

• ->，以便它仅适用于当前组件及其孩子。
我们使用

:host

Answer 1

如果您想要基于路由的方法，这是一种基于组件的方法。

当您访问和路线并将其子路线访问时，使用上述方法添加样式到路由的根部组件，自定义将变化。

示例造型

::ng-deep

子组件添加了路由路线的样式，这些自定义将应用于家庭和家庭的孩子（home/contact）。