Angular素材15:如何自定义按钮和输入字段的样式?

Question

我想重写Angular Material 15按钮和输入字段的字体宽度。

材料文档说我应该在我的样式表中这样做:

@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);