造型角材料日期选择器

不建议以角度材质组件的内部元素为目标,请参阅其 theming docs 。相反,您应该为它们的CSS变量设置值。

角材料v19+

Angular Material v19添加了一个 overrides 每个组件的SCSS API,允许自定义外观。 例如,要覆盖日期选择器样式,请使用以下SCSS代码:

@use '@angular/material' as mat;

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  @include mat.datepicker-overrides((
    calendar-container-background-color: #b91212,
    // add more overrides here if needed ...
  ));
}

您可以查看 datepicker documentation 对于您可以覆盖的所有可能值。

角材料v17/v18

如果您使用的是早期版本,而此API还不可用,则最好的解决方案是直接为其CSS变量提供值:

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  --mat-datepicker-calendar-container-background-color: #b91212;
  // add more variables here if needed ...
}

一旦你将应用程序更新到Angular v19或更高版本,你应该重构代码并使用 覆盖 混入,因为只有那些是官方支持的。