Angular注册页面CSS加载后未生效，点击输入框才生效的解决方法

问题根源分析 #

你遇到的问题核心来自两点：

• Angular Material的mat-form-field组件未正确初始化（表单控件未绑定对应FormGroup），导致默认样式未触发，仅在交互后才加载完整样式
• 页面根元素未设置高度，导致.container的height:100%规则失效，布局错位

具体修复步骤 #

1. 完善表单控件绑定

你的HTML中使用了formControlName，但<form>标签未绑定对应的FormGroup，这会导致Angular Material无法正确识别表单状态，进而延迟样式加载。

修改组件TS代码：

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent {
  // 创建与HTML控件对应的表单组
  registerForm = new FormGroup({
    email: new FormControl(''),
    password: new FormControl('')
  });

  back() {
    // 你的返回逻辑
  }
}

修改HTML中的form标签：

<form [formGroup]="registerForm">
  <!-- 原mat-form-field内容保持不变 -->
</form>

2. 设置页面根元素高度

.container的height:100%依赖父元素高度，默认情况下html、body和app-root未设置高度，导致布局无法占满屏幕。

在全局样式文件（styles.scss）中添加：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

app-root {
  display: block;
  height: 100%;
}

3. 明确指定mat-form-field外观

给mat-form-field添加appearance属性，强制Angular Material加载完整样式，避免依赖交互触发：

<mat-form-field appearance="fill">
  <mat-label>Enter your email</mat-label>
  <input matInput formControlName="email" />
</mat-form-field>

<mat-form-field appearance="fill">
  <mat-label>Enter your password</mat-label>
  <input type="password" matInput formControlName="password" />
</mat-form-field>

额外优化：调整重复布局结构 #

你页面中有两个.container，会导致"Go to Login"按钮布局冲突，建议合并结构并调整样式：

<div class="container">
  <div class="form-container">
    <div class="title">Register</div>
    <form [formGroup]="registerForm">
      <mat-form-field appearance="fill">
        <mat-label>Enter your email</mat-label>
        <input matInput formControlName="email" />
      </mat-form-field>
      <mat-form-field appearance="fill">
        <mat-label>Enter your password</mat-label>
        <input type="password" matInput formControlName="password" />
      </mat-form-field>
    </form>
    <div class="buttons-container">
      <button mat-raised-button class="register-button">
        Register
      </button>
    </div>
  </div>
  <button (click)="back()" class="route-button"> Go to Login </button>
</div>

同步调整.route-button样式，去掉绝对定位相关属性：

.route-button {
  text-decoration: none;
  color: white;
  border: white solid 0.2rem;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  width: 15rem;
  padding: 1.5rem;
  background-color: rgb(55, 55, 55);
  margin-top: 20px;
}

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