Angular mat-form-field异常：表单字段出现内部分隔线问题

云原生阿岚

2026-7-30

Angular Material表单字段内部分隔线问题解决办法

排查CSS优先级冲突
大概率是Tailwind/DaisyUI的全局样式覆盖了Angular Material表单的默认样式，尤其是分隔线相关的伪元素或边框样式。给Material表单字段加个专属类，强制覆盖冲突样式：

.mat-form-field-fix {
  ::ng-deep .mat-form-field-underline {
    display: none !important;
  }
  .mat-mdc-form-field-subscript-wrapper {
    border-top: none !important;
  }
}

然后在HTML里给表单字段加上这个类：

<mat-form-field class="mat-form-field-fix">
  <input matInput placeholder="请输入内容">
</mat-form-field>

调整样式加载顺序
在angular.json里把Angular Material的样式文件放到Tailwind和DaisyUI后面加载，让Material的样式能覆盖全局样式：

"styles": [
  "node_modules/tailwindcss/base.css",
  "node_modules/tailwindcss/components.css",
  "node_modules/tailwindcss/utilities.css",
  "node_modules/daisyui/dist/full.css",
  "@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.scss"
]

自定义DaisyUI配置禁用全局分隔线
如果是DaisyUI的全局分隔线样式搞的鬼，在tailwind.config.js里自定义主题，把分隔线设为透明：

module.exports = {
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
      {
        customTheme: {
          "divider": "transparent",
        },
      },
    ],
  },
}

切换Material表单的外观模式
给mat-form-field设置appearance="fill"或者appearance="outline"，避开默认样式和第三方库的冲突：
```
<mat-form-field appearance="fill">
  <input matInput placeholder="请输入内容">
</mat-form-field>
```