如何自定义Angular Material UI v7输入文本框实现紧凑设计？

以下是几种可行的自定义方式，帮你实现更紧凑的文本输入框：

一、直接用自定义CSS覆盖样式 #

给目标输入框容器添加自定义类，通过CSS调整内边距、高度等属性：

1. 编写紧凑化样式 #

/* 减小表单字段容器的底部间距 */
.compact-input .mat-form-field-wrapper {
  padding-bottom: 0.25em;
}

/* 设置输入框容器的固定高度，垂直居中内容 */
.compact-input .mat-form-field-flex {
  height: 32px;
  align-items: center;
}

/* 调整输入框内部的上下内边距，移除顶部边框减少高度 */
.compact-input .mat-form-field-infix {
  padding: 0.375em 0;
  border-top: 0;
}

/* 缩小输入框字体，调整左右内边距 */
.compact-input input.mat-input-element {
  font-size: 14px;
  padding: 0 0.5em;
}

/* 调整浮动标签的位置，避免遮挡 */
.compact-input .mat-form-field-label-wrapper {
  top: -0.5em;
}
.compact-input.mat-form-field-should-float .mat-form-field-label {
  transform: translateY(-1.1em) scale(0.75);
}

2. 在模板中使用类 #

<mat-form-field class="compact-input">
  <mat-label>用户名</mat-label>
  <input matInput placeholder="请输入用户名">
</mat-form-field>

二、通过自定义主题全局调整 #

如果需要全局所有输入框都紧凑化，可以在Angular Material主题文件中修改变量：

@import '~@angular/material/theming';

@include mat-core();

// 定义主题色板
$app-primary: mat-palette($mat-blue);
$app-accent: mat-palette($mat-pink, A200, A100, A400);
$app-warn: mat-palette($mat-red);

$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

// 应用主题并覆盖输入框样式
@include mat-form-field-theme($app-theme);
@include mat-input-theme($app-theme);

// 全局调整输入框密度
.mat-form-field-wrapper {
  padding-bottom: 0.25em !important;
}

.mat-form-field-flex {
  min-height: 32px !important;
}

.mat-form-field-infix {
  padding: 0.375em 0 !important;
  border-top: 0 !important;
}

将上述代码保存为theme.scss，然后在styles.scss中引入：

@import './theme.scss';

三、结合内置外观样式优化 #

使用Material UI的fill外观样式，再配合自定义CSS可以达到更紧凑的效果：

<mat-form-field appearance="fill" class="compact-input">
  <mat-label>邮箱</mat-label>
  <input matInput placeholder="请输入邮箱">
</mat-form-field>

对应的CSS可以针对fill外观做进一步调整，比如移除额外的圆角内边距：

.compact-input.mat-form-field-appearance-fill .mat-form-field-flex {
  padding: 0 0.5em;
}

内容的提问来源于stack exchange，提问作者Sam K