Angular Material 15：如何自定义按钮和输入字段的样式？

Question

我想覆盖 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);

Answer 1

我花了相当长的时间才解决您的问题：使按钮的样式不那么复杂，因为$button它是typography-config. 然而，对于输入字段，我需要创建一个自定义属性typography-config，然后通过@mixin材料输入字段 ( ) 的类选择器手动将其分配.mat-mdc-form-field。

@use '@angular/material' as mat;
@use "sass:map";

/* Styles to be applied to buttons */
$my-custom-button: mat.define-typography-level(
  $font-family: 'Roboto',
  $font-weight: 500,
  $font-size: 2rem,
  $line-height: 1,
  $letter-spacing: 'normal'
);

/* Styles to be applied to input-fields */
$my-custom-input: mat.define-typography-level(
  $font-family: 'Roboto',
  $font-weight: 400,
  $font-size: 1rem,
  $line-height: 1,
  $letter-spacing: 'normal'
);

/* Merge custom configs into existing config */
$my-typography-config: map.merge(
    mat.define-typography-config(
        /* 'button'-property will work out of the box */
        $button: $my-custom-button
    ),
    (
        /* 'input'-property will have to be assigned under '@mixin typography' further below */
        'input': $my-custom-input
    )
);

/* Apply custom config */
@include mat.all-component-typographies($my-typography-config);

/* Let's assign the custom property 'input' that we defined above */
@mixin typography($theme) {
    $custom-typography-config: mat.get-typography-config($theme);
    
    .mat-mdc-form-field {
        @include mat.typography-level($custom-typography-config, 'input')
    }
}

/* Define custom app-theme based on custom-configs */
$app-theme: mat.define-light-theme(
    (
        typography: $my-typography-config,
    )
);

/* Apply custom app-theme */
@include typography($app-theme);