使用Tailwindcss时在焦点上输入15角度的材料错误

Question

在聚焦之前：

​

​

聚焦后：

​

​

问题：

使用角垫第15节和最新的尾风，有一个错误，当聚焦输入场。

为了重现这个问题：

ng new angular-test
cd angular-test
ng add @angular/material
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

styles.scss

[...]

/* You can add global styles to this file, and also import other style files */

@tailwind base;
@tailwind components;
@tailwind utilities;

app.component.html

<mat-form-field appearance="outline">
  <mat-label>Favorite food</mat-label>
  <input matInput placeholder="Ex. Pizza" value="Sushi">
</mat-form-field>

有什么办法解决这个问题吗？

Answer 1

“顺风”正在添加边框样式: solid；这将导致呈现额外的边框。

快速解决方案是覆盖正确的边框样式。

将其添加到styles.css文件中

.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
  border-right-style: hidden;
}