我的自定义 angular material 主题破坏了表单输入的显示

Question

我正在尝试为我的应用程序设置自定义 angular material 主题。我已按如下方式设置我的自定义主题：

来自 styles.scss:

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
@import "portal-theme";

@tailwind base;
@tailwind components;
@tailwind utilities;

来自 portal-theme.scss:

@use '@angular/material' as mat;

@import "portal-palettes";

$portal-primary: mat.define-palette($portal-primary-palette);
$portal-accent: mat.define-palette($portal-secondary-palette);
$portal-warn: mat.define-palette($portal-warn-palette);

$portal-theme: mat.define-light-theme((
  color: (
    primary: $portal-primary,
    accent: $portal-accent,
    warn: $portal-warn
  )
));

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

来自 portal-palettes.scss:

$portal-primary-palette: (
  50 : #e0eaf1,
  100 : #b3cbdb,
  200 : #80a8c4,
  300 : #4d85ac,
  400 : #266b9a,
  500 : #005188,
  600 : #004a80,
  ...

但是，如果我从 styles.scss 中删除这一行：

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

然后 我所有表单输入的显示中断...我认为我不需要这个预建主题，因为我已经创建了自己的主题。

有人可以帮我理解为什么我需要这一行以及我的自定义主题中缺少什么吗？为什么我的表单和表单输入中断显示？

Answer 1

我已将以下行添加到我的 portal-theme.scss 文件的底部：

@include mat.core();

这似乎修复了损坏的表单显示。

现在的portal-theme.scss如下：

@use '@angular/material' as mat;

@import "portal-palettes";

$portal-primary: mat.define-palette($portal-primary-palette);
$portal-accent: mat.define-palette($portal-secondary-palette);
$portal-warn: mat.define-palette($portal-warn-palette);

$portal-theme: mat.define-light-theme((
  color: (
    primary: $portal-primary,
    accent: $portal-accent,
    warn: $portal-warn
  )
));

@include mat.core(); // Addition that fixes the broken display issue
@include mat.core-theme($portal-theme);
@include mat.all-component-themes($portal-theme);

我的自定义 angular material 主题破坏了表单输入的显示

Display of form inputs broken by my custom angular material theme

angular

angular-material

material-design