對焦前：
對焦后：
問題：
使用 angular mat v. 15 和最新的 tailwindcss 在聚焦輸入欄位時存在錯誤。
要重現問題：
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: [],
}
樣式.scss
[...]
/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;
應用程式組件.html
<mat-form-field appearance="outline">
<mat-label>Favorite food</mat-label>
<input matInput placeholder="Ex. Pizza" value="Sushi">
</mat-form-field>
任何想法如何解決問題？
uj5u.com熱心網友回復：
Tailwind 正在添加 border-style: 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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/537243.html