Angular Material组件输入框出现额外下划线问题求助

Hey there! I totally get how frustrating it is when your registration form's matInput fields have those unexpected extra underlines. Let's walk through the most common causes and fixes to get this sorted:

1. Check for Duplicate Style Imports #

First off, make sure you're not importing Angular Material's theme styles multiple times. This is a super common culprit. You should only import the prebuilt theme once in your global styles.scss (or styles.css) file, like this:

@import '@angular/material/prebuilt-themes/indigo-pink.css';

Avoid adding this import to any component-specific stylesheets—duplicate imports can lead to conflicting underline styles that stack up.

2. Hunt for Custom CSS Conflicts #

Next up, check if your own custom CSS is adding an extra underline. For example, if you have something like this in your styles:

input {
  border-bottom: 1px solid #ccc;
}

This will override or stack with Angular Material's default underline. Use your browser's dev tools (F12) to inspect the input element:

• Right-click the problematic input and select "Inspect"
• In the "Styles" tab, look for border-bottom or text-decoration properties that aren't coming from Angular Material's classes (they'll start with the mat- prefix)
• Either remove the conflicting custom style, or use a more specific selector to target only non-Material inputs (e.g., .custom-input { border-bottom: ... })

3. Verify mat-form-field & Layout Structure #

Angular Material's mat-form-field expects a clean nested structure. Your table layout might be inheriting styles that bleed into the input—for example, if your table cells have a bottom border:

td {
  border-bottom: 1px solid #eee;
}

Try temporarily removing the table to test if the underline disappears. If it does, adjust your table styles to exclude mat-form-field elements:

td:not(:has(mat-form-field)) {
  border-bottom: 1px solid #eee;
}

Also, ensure you're not wrapping the matInput in extra unnecessary tags inside the mat-form-field—keep it as direct as possible.

4. Check Version Compatibility #

Mismatched Angular and Angular Material versions can cause styling glitches. Run ng version in your terminal to make sure your @angular/core and @angular/material versions match (e.g., both 16.x.x). If they're out of sync, update them to match using:

ng update @angular/core @angular/material

Quick Code Structure Check #

Looking at your snippet, double-check that your mat-form-field and matInput are properly nested. Here's a cleaned-up example of the structure you should aim for:

<form class="example-form" (ngSubmit)="onSignup(f)" #f="ngForm">
  <label class="registr">Registration Form</label>
  <table class="example-full-width" cellspacing="0">
    <tr>
      <td>
        <mat-form-field class="example-full-width">
          <input matInput id="fname" name="fname" placeholder="First Name" required>
        </mat-form-field>
      </td>
    </tr>
  </table>
</form>

Start with the dev tool inspection—it's the fastest way to pinpoint exactly where that extra underline is coming from. Let me know if any of these fixes work for you!

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