[英]Angular 15 Material bug input on focus when using Tailwindcss
Before focusing:对焦前:
After focusing:对焦后:
Problem:问题:
Using angular mat v. 15 and latest tailwindcss there is a bug when focusing input field.使用 angular mat v. 15 和最新的 tailwindcss 在聚焦输入字段时存在错误。
To reproduce the problem:要重现问题:
ng new angular-test
cd angular-test
ng add @angular/material
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
tailwind.config.js tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
}
styles.scss 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 app.component.html
<mat-form-field appearance="outline">
<mat-label>Favorite food</mat-label>
<input matInput placeholder="Ex. Pizza" value="Sushi">
</mat-form-field>
Any ideas how to solve the problem?任何想法如何解决问题?
tailwind is adding border-style: solid; Tailwind 正在添加 border-style: solid; which is causing the extra border to be rendered
这导致额外的边框被渲染
quick solution would be to override the right border style快速解决方案是覆盖右边框样式
add this in the styles.css file将其添加到 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.