代码之家 › 专栏 › 技术社区 › Jihed Ben Zarb

造型角材料日期选择器

datepicker angular

1

Jihed Ben Zarb · 技术社区 · 1 年前

我试图设计我的角材质日期选择器的样式,但是,使用许多不同的方法都不起作用(我使用的是angular 17和角材质17.3.10)。我在这里看到很多问题都是用::ng-deep来回答的,但现在它已被弃用,因此使用它不起作用:

:host ::ng-deep .mat-calendar {
  display: block;
  background-color: #b91212;
  color: var(--mat-datepicker-calendar-container-text-color);
  box-shadow: var(--mat-datepicker-calendar-container-elevation-shadow);
  border-radius: var(--mat-datepicker-calendar-container-shape);
}

此外,尝试使用panelClass,但也不起作用。还有一件事要提的是,在Angular材质文档中,样式只提供给v19。你们能帮帮我吗?我将不胜感激:)

1 回复 | 直到 1 年前

1

JSON Derulo 1 年前

不建议以角度材质组件的内部元素为目标,请参阅其 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或更高版本,你应该重构代码并使用 覆盖 混入,因为只有那些是官方支持的。