这就是我的问题的样子(参见戒指):
使用Chrome的检查器发现它与
--tw-ring-shadow
有关。
所以我尝试添加像 ring-0
和 ring-offset-0
这样的类(如下所示),但它不起作用!!
import { TextField } from "@mui/material";
function ContactForm(): JSX.Element {
return (
<div className="form-container pt-12 flex flex-col items-center">
<div className="input-row">
<TextField
className="ring-offset-0 ring-0"
label="First Name"
variant="outlined"
/>
</div>
</div>
);
}
export default ContactForm;
您知道如何摆脱与输入字段重叠的恼人边框吗??
非常感谢您的帮助!
您可以尝试通过在应用程序的 CSS 中添加以下内容来覆盖输入字段的 Tailwind CSS 变量:
input {
--tw-ring-shadow: 0 0 #000 !important;
}
或者...我们看不到
<Textfield>
生成的代码,以确保您的 Tailwind 实用程序类正确应用于输入元素,但如果没有,您可以尝试直接使用定位 <input>
字段@apply
在你的 CSS 文件中:
input {
@apply ring-offset-0 ring-0
}
尝试在课程之前添加焦点:像这样:
<TextField
className="focus:ring-offset-0 focus:ring-0"
label="First Name"
variant="outlined" />
此更改可确保单击输入字段时应用样式“ring-offset-0”和“ring-0”。