antd input 里面加上 prefix 导致校验时有两个边框

Question

在进行react项目开发时,UI框架使用 antd

现在已经做好了登录页面,但是发现做表单验证的时候出了一些问题
如果我在Input中添加prefix 时,会导致内部输入区域和外部输入框都显示,如果去掉 prefix 就不会有这样问题。求解决!!!
ps:使用的是 antd 4.xxx
我试着修改样式，也不行

.ant-input-affix-wrapper .ant-input:focus {
  border: none;
  border: 1px solid white !important;
  box-shadow: none;
}

相关代码

<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />

Answer 1

可以控制台检视一下这个元素吗？ant提供的样式已经将input元素的border和outline等都清除掉了（也是现代UI比较常见的）

还是具体看一眼，computed找一下是谁加上了不该加的样式