如何使用 TailwindCSS 禁用环形阴影？

Question

这是我的问题的样子（见圆环）：

View Image

使用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 中添加以下内容来覆盖输入字段的 Tailwind CSS 变量：

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

或者...我们看不到 <Textfield> 生成的代码以确保您的 Tailwind 实用程序类正确应用于输入元素，但如果没有，您可以尝试在 CSS 文件中使用 @apply 直接定位 <input> 字段：

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

如何使用 TailwindCSS 禁用环形阴影？

How can I disable the ring shadow with TailwindCSS?

css

input-field

reactjs

material-ui

tailwind-css