如何用tailwindcss禁用环形阴影？

Question

这就是我的问题的样子（请参阅戒指）：

查看图像

使用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;

您是否知道如何摆脱这个烦人的边界，这与输入字段重叠？

感谢您的帮助！

Answer 1

您可以尝试通过在您的应用程序的CSS中添加以下内容来覆盖输入字段的尾风CSS变量：

input {
  --tw-ring-shadow: 0 0 #000 !important;
}

另外...我们看不到＆lt; textfield＆gt;生成的代码，以确保您的尾随效用类正正确地应用于输入元素，但是如果没有，您可以尝试使用＆gt;字段来定位＆lt;字段，使用@Apply在您的CSS文件中：

input {
  @apply ring-offset-0 ring-0
}

Answer 2

尝试添加焦点：在这样的课程之前：

<TextField 
className="focus:ring-offset-0 focus:ring-0" 
label="First Name" 
variant="outlined" />

此更改确保在单击输入字段时应用样式的“ RING-FORFSET-0”和“ RING-0”。