主页 / coding / 问题 / 79339969
Accepted
Jihed Ben Zarb
Asked: 2025-01-09 00:09:43 +0800 CST

为 Angular Material 日期选择器添加样式

  • 772

我正在尝试设计我的角度材料日期选择器的样式，但是，使用许多不同的方法（我使用的是 Angular 17 和 Angular Material 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 Material Docs 中，样式仅针对 v19 提供。你们能帮助我吗？我将不胜感激 :)

angular

1 个回答

  1. Best Answer

    不建议针对 Angular Material 组件的内部元素，请参阅其主题文档。相反，您应该为其 CSS 变量设置值。

    Angular Material v19+

    Angular Material v19overrides为每个组件添加了一个 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 ...
  ));
}

    您可以检查日期选择器文档以了解所有可以覆盖的可能值。

    角度材料 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 或更高版本，您就应该重构代码并使用 mixins overrides，因为只有这些才受到官方支持。

    • 1

相关问题