Angular中Mat-Form-Field（Outline外观）对齐异常及样式不生效问题求助

各位好！最近在Angular项目里使用Material组件踩了坑，想请教一下大家怎么解决：

我用这段代码添加了分页组件，但它的外框完全不对齐，而且预期的CSS样式一点都没生效：

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>

更头疼的是我做的新增角色弹窗也有同样的问题——弹窗里的mat-form-field用了outline外观，不管是对齐还是样式都完全不正常。我把弹窗的HTML和SCSS代码贴在下面了，有没有大佬能帮我看看问题出在哪，该怎么修复呀？

弹窗HTML代码 #

<div class="role-dialog-container">
  <h2 mat-dialog-title class="dialog-title">
    <mat-icon class="title-icon">person_add</mat-icon>
    Add New Role
  </h2>
  <form [formGroup]="form" class="role-form">
    <!-- Name Field -->
    <div class="form-section">
      <mat-form-field appearance="outline" class="full-width">
        <mat-label>Role Name</mat-label>
        <input matInput formControlName="name" placeholder="Enter role name" />
        <mat-icon matPrefix class="field-icon">badge</mat-icon>
        <mat-error *ngIf="form.controls['name'].touched && form.controls['name'].invalid">
          <mat-icon class="error-icon">error</mat-icon>
          Role name is required
        </mat-error>
      </mat-form-field>
    </div>
    <!-- Description Field -->
    <div class="form-section">
      <mat-form-field appearance="outline" class="full-width">
        <mat-label>Description</mat-label>
        <textarea matInput rows="3" formControlName="description" placeholder="Describe the role's responsibilities and purpose">
        </textarea>
        <mat-icon matPrefix class="field-icon">description</mat-icon>
      </mat-form-field>
    </div>
    <!-- Status Dropdown (replacing checkbox) -->
    <div class="form-section">
      <mat-form-field appearance="outline" class="full-width">
        <mat-label>Status</mat-label>
        <mat-select formControlName="isActive">
          <mat-option [value]="true">
            <div class="status-option active-status">
              <mat-icon class="status-icon">check_circle</mat-icon>
              <span>Active</span>
            </div>
          </mat-option>
          <mat-option [value]="false">
            <div class="status-option inactive-status">
              <mat-icon class="status-icon">cancel</mat-icon>
              <span>Inactive</span>
            </div>
          </mat-option>
        </mat-select>
        <mat-icon matPrefix class="field-icon">toggle_on</mat-icon>
        <mat-hint>Choose whether this role is currently active</mat-hint>
      </mat-form-field>
    </div>
    <!-- Parent Role Field -->
    <div class="form-section">
      <mat-form-field appearance="outline" class="full-width">
        <mat-label>Parent Roles</mat-label>
        <mat-select formControlName="parentRole" multiple>
          <mat-option *ngFor="let role of allRoles$ | async" [value]="role.id">
            <div class="parent-role-option">
              <mat-icon class="role-icon">account_tree</mat-icon>
              <span>{{ role.name }}</span>
            </div>
          </mat-option>
        </mat-select>
        <mat-icon matPrefix class="field-icon">family_restroom</mat-icon>
        <mat-hint>Select parent roles (optional)</mat-hint>
      </mat-form-field>
    </div>
  </form>
  <!-- Action Buttons -->
  <div mat-dialog-actions class="dialog-actions">
    <button mat-stroked-button class="cancel-btn" (click)="close()">
      <mat-icon>close</mat-icon>
      Cancel
    </button>
    <button mat-flat-button color="primary" class="save-btn" (click)="submit()">
      <mat-icon>save</mat-icon>
      Save Role
    </button>
  </div>
</div>

弹窗SCSS代码 #

// Role Dialog Styles
.role-dialog-container {
  min-width: 450px;
  max-width: 600px;

  .dialog-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    margin: -24px -24px 24px -24px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    font-weight: 500;
    border-radius: 4px 4px 0 0;

    .title-icon {
      margin-right: 12px;
      font-size: 24px;
      width: 24px;
      height: 24px;
    }
  }
}

.role-form {
  padding: 0 8px;

  .form-section {
    margin-bottom: 20px;

    .full-width {
      width: 100%;
    }

    .field-icon {
      color: #666;
      margin-right: 8px;
      font-size: 20px;
      width: 20px;
      height: 20px;
    }

    .error-icon {
      font-size: 16px;
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }
  }
}

// Status Option Styles
.status-option {
  display: flex;
  align-items: center;
  padding: 4px 0;

  .status-icon {
    // 原代码此处未完成，保留原样
  }
}

补充一下：我已经确认所有需要的Material模块（比如MatPaginatorModule、MatDialogModule、MatFormFieldModule这些）都在对应的模块里导入了，但样式还是异常，会不会是组件样式封装的问题？或者我的SCSS选择器优先级不够？

内容来源于stack exchange