标签: angular-material-15

当我自定义主题来设置字体时...

1. 一些文本的样式正确（例如<mat-card-title> <mat-card-action>等）
2. 但其他一些则没有（例如<p> <span> <mat-card-content>）并且默认为 Roboto...那些不应该采用 body-1 风格吗？请注意，我使用 mat-card 作为示例，但其他组件也会发生同样的情况。 https://material.angular.io/guide/typography

重现的最少步骤：

• 将 Google 字体添加到 index.html
• 在 styles.scss 中配置样式，以便新字体成为所有级别的默认字体（应该在任何地方使用）

$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-typography: mat.define-typography-config(
  $font-family: "'Nerko One', cursive",
);

$theme: mat.define-light-theme(
  (
    color: (
      primary: $theme-primary,
      accent: $theme-accent,
    ),
    typography: $my-typography,
  )
);
@include mat.all-component-themes($theme);

这是一个示例，您可以看到标题等已设置样式，但看不到卡片的内容： https://stackblitz.com/edit/angular-wan6f9 ?file=src/app/card-actions-example.html

我尝试了几种方法，包括配置每个级别，但都不起作用。唯一有效的方法是将默认值硬编码到文档的根目录，但我不想这样做。

我想覆盖 Angular Material 15 按钮和输入字段中的字体宽度。

Material 文档在这里说我应该在样式表中执行此操作：

@use '@angular/material' as mat;

$my-custom-level: mat.define-typography-level(
  $font-family: Roboto,
  $font-weight: 400,
  $font-size: 1rem,
  $line-height: 1,
  $letter-spacing: normal,
);

我不认为这段代码实际上“应用”了我的字体更改，我想它需要应用于当前主题或其他东西，我尝试了各种方法，但不知道如何应用它。任何提示将不胜感激。

我尝试创建自定义主题，但无法弄清楚在哪里应用 $my-custom-level：

$config: mat.define-typography-config();

$theme: mat.define-light-theme((                                                    
    typography: $config,
));

@include mat.input-typography($theme);

新的 Angular Material 15 在颜色和间距方面有一些“突破性”变化。因此我需要覆盖 CSS 变量的默认值。我定义在我的styles.scss

:root {
    --mdc-typography-button-letter-spacing: 'normal';
    --mdc-dialog-supporting-text-color: mat.get-color-from-palette($greyPalette, 900);
}

虽然第一个变量是undefined，因此采用了定义，但第二个变量有一个值但不会被覆盖。

那么，如何正确设置变量呢？

我使用 Angular 15 和 Material 15 并尝试添加一个没有波纹效果/任何悬停效果的按钮。

这曾经适用于角材料 12：

<button mat-button [disableRipple]="true">DoSomething</button>

但现在它仍然显示波纹/悬停效果。“disableRipple”输入是否损坏？

我可以通过执行以下操作来消除此行为：

.no-hover-effect {
  &.mat-mdc-button {
    ::ng-deep {
      .mat-mdc-button-persistent-ripple, .mat-mdc-button-ripple {
        display: none;
      }
    }
  }
}

但我想要一个无需修改 css 的解决方案。

像这样的简单表格

<form [formGroup]="myForm">
    <mat-form-field class="my-light-field">
      <mat-label>Name</mat-label>
      <input matInput type="text" [value]="myObj?.name" required readonly/>
    </mat-form-field>
</form>

我喜欢让现场变得透明

.my-light-field {
  .mdc-text-field--filled{
    background-color: transparent !important;
  }
}

盘旋在田野上空时，天色越来越暗。是否可以删除悬停效果？还有对焦...