无法弄清楚为什么@Angular/Material datepicker中缺少某些样式

Question

我们有一个 Web 应用程序，正在从 Angular v16 更新到 v18。 99% 的东西看起来不错并且工作得很好，但我有一个问题我无法弄清楚，那就是日期选择器的“下/上个月”按钮的样式似乎丢失了，如下所示：

巧合的是，在测试过程中，我们不小心加载了仍然包含旧版本样式表的网站，你瞧，它解决了问题！ 经过一番调查后，这条规则似乎是由 @Angular/Material v16 样式表提供的，但不包含在 v18 样式表中。

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  width: var(--mdc-icon-button-state-layer-size);
  height: var(--mdc-icon-button-state-layer-size);
  padding: 8px;
}

我不明白为什么我似乎缺少重要的风格。 这是我们

styles.scss

的相关内容

@use '@angular/material' as mat;

$theme: mat.define-theme((
  color: (
    theme-type: light,
    use-system-variables: true,
    system-variables-prefix: dst-sys-color
  ),
  typography: (
    system-variables-prefix: md-sys-typescale
  ),
  density: (
    scale: -2
  )
));

@include mat.core;

html {
  min-width: 1024px;
  @include mat.typography-hierarchy($theme, $back-compat: true);
  @include mat.all-component-themes($theme);
}

我应该注意，主题颜色和版式属性是通过另一个样式表中定义的自定义属性提供的，这就是我们使用

use-system-variables

选项的原因。它们显然加载正确，否则整个网站都会被破坏，而不仅仅是这个微小的 UI 元素。

Answer 1

问题是由于

scale

属性设置为

-2

导致字体大小大幅减小并导致此问题。我发现这个代码片段可能与实际问题有关。

_datepicker-theme.scss

/// Outputs density theme styles for the mat-datepicker.
/// @param {Map} $theme The theme to generate density styles for.
@mixin density($theme) {
  @if inspection.get-theme-version($theme) == 1 {
    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
  } @else {
    // TODO(crisbeto): move this into the structural styles
    // once the icon button density is switched to tokens.

    // Regardless of the user-passed density, we want the calendar
    // previous/next buttons to remain at density -2
    .mat-calendar-controls {
      @include icon-button-theme.density(-2);
    }
  }
}

要解决此问题，只需添加以下 CSS，它会硬编码

--mdc-icon-button-state-layer-size: 40px;

的大小，以防止出现该错误。

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
}

另外请在

angular/components

github 页面上提出 github 问题，以便更好地了解实际问题。

SCSS代码：

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    density: (
      scale: -2,
    ),
  )
);

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;

  @include mat.all-component-themes($theme);
}

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
}

html {
  height: 100%;
}

@include mat.core;
@include mat.color-variants-backwards-compatibility($theme);

Stackblitz 演示