这就是我的问题的样子(见环):
看图 https://i.stack.imgur.com/RLCE0.png
使用Chrome的inspector发现与--tw-ring-shadow
。
所以我尝试添加类ring-0
and 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
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)