如何移除@material-tailwind/react中Input组件的蓝色边框？

问题描述 #

我在React项目中使用@material-tailwind/react的Input组件，代码如下：

<Input
   label="First Name"
    containerProps={{ className: "min-w-[72px]" }}
    value={first}
    onChange={(e) => setFirst(e.target.value)}
/>

当前组件出现蓝色与黑色边框混合的问题，效果如下：

解决方案 #

这种冲突一般是浏览器默认的表单焦点轮廓（蓝色）与组件自带边框（黑色）叠加导致的，可通过以下方式解决：

• 移除浏览器默认焦点样式：给Input组件添加focus:outline-none类，覆盖浏览器默认的焦点轮廓：

<Input
   label="First Name"
    containerProps={{ className: "min-w-[72px]" }}
    className="focus:outline-none"
    value={first}
    onChange={(e) => setFirst(e.target.value)}
/>

• 统一组件边框样式：自定义边框及焦点状态样式，确保视觉统一：

<Input
   label="First Name"
    containerProps={{ className: "min-w-[72px] border border-gray-300 focus:border-blue-500" }}
    className="focus:outline-none"
    value={first}
    onChange={(e) => setFirst(e.target.value)}
/>

• 检查Tailwind配置有效性：确认tailwind.config.js中正确引入@material-tailwind/react的插件，避免样式冲突：

// tailwind.config.js
const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
});

内容的提问来源于stack exchange，提问作者Dev