这就是我的问题的样子(见环):
使用Chrome的inspector发现与--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
}
关于css - 如何使用 TailwindCSS 禁用环形阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72353450/