密度为-3时Mat表单字段值对齐问题

Question

我无法将输入值垂直居中。

当密度为-3且字体大小为1em时，输入的值未正确居中。

当输入中没有值时，标签对齐也不完全正确，因为它有点低。

有谁知道处理这个问题的最佳方法是什么？

我知道我可以为输入设置顶部定位，但我不确定这是否是最好的方法。还有其他人有更好的主意吗？

参见示例：https://stackblitz.com/edit/b328rv-mayvac?file=package.json

Answer 1

对于 16px，可以在排版配置中指定

line-height

的

23px

。

$font-family: Calibri, sans-serif;
$config: mat.define-typography-config(
  $font-family: $font-family,
  $headline-1:
    mat.define-typography-level(
      $font-size: 22px,
      $line-height: 22px,
      $font-weight: bold,
      $font-family: $font-family,
    ),
    ...

完整的SCSS：

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

$font-family: Calibri, sans-serif;
$config: mat.define-typography-config(
  $font-family: $font-family,
  $headline-1:
    mat.define-typography-level(
      $font-size: 22px,
      $line-height: 22px,
      $font-weight: bold,
      $font-family: $font-family,
    ),
  $headline-2:
    mat.define-typography-level(
      $font-size: 16px,
      $line-height: 23px,
      $font-weight: bold,
      $font-family: $font-family,
    ),
  $headline-3:
    mat.define-typography-level(
      $font-size: 16px,
      $line-height: 23px,
      $font-weight: normal,
      $font-family: $font-family,
    ),
  $button:
    mat.define-typography-level(
      $font-size: 16px,
      $line-height: 23px,
      $font-weight: bold,
      $font-family: $font-family,
    ),
  $subtitle-1:
    mat.define-typography-level(
      $font-size: 16px,
      $line-height: 23px,
      $font-weight: bold,
      $font-family: $font-family,
    ),
  $body-1:
    mat.define-typography-level(
      $font-size: 16px,
      $line-height: 23px,
      $font-weight: normal,
      $font-family: $font-family,
    ),
);

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$theme-warn: mat.define-palette(mat.$red-palette);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$theme: mat.define-light-theme(
  (
    color: (
      primary: $theme-primary,
      accent: $theme-accent,
      warn: $theme-warn,
    ),
    typography: $config,
    density: -3,
  )
);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($theme);

Stackblitz 演示