更改/覆盖antdesign输入组件的样式

Question

我想更改antdesign输入组件的样式，我不知道如何使它工作。 现在，我已经能够在验证成功时更改样式，并且悬停时边框颜色更改为绿色。 但是，当我点击字段进行输入时，它仍然显示蓝色边框。 现在，为什么会这样？ 如何覆盖antdesign样式？

<FormItem  hasFeedback validateStatus={this.state.passwordErr} help={passwordHelp}  label="Password" >

            <Input className={validClass}   type="password" name="password" value={this.state.password} onChange={this.handlePassword} />

            </FormItem>

这是一个很小的相关部分。

此css适用于悬停

 .success:hover{
    border:1px solid green;
    box-shadow: 0 0 2px green;
}

但是当我没有悬停时这不起作用

 .success:hover{
    border:1px solid green;
    box-shadow: 0 0 2px green;
}

我注意到这是阻止我的CSS的部分

.ant-input:focus {
    border-color: #5070f2;
     outline: 0; 
    -webkit-box-shadow: 0 0 0 2px rgba(40, 72, 229, 0.2); 
    box-shadow: 0 0 0 2px rgba(40, 72, 229, 0.2);
}

那么，如何覆盖此css并强制它使用我的？

这是效果的图像 我想把蓝色变成绿色。

这是检查中的代码

Answer 1

您只覆盖以下样式：hover，您说您发现.ant-input:focus {正在覆盖您的样式。

为什么不为:focus事件编写样式呢？

    .success:focus {
      border:2px solid red;
     }

<input type="text" class="success">

如果这不起作用，请写一个更具体的路径，例如input.success:focus或form input.success:focus

但我猜（因为关注输入元素）问题出现在焦点上的outline

您可以更改轮廓颜色/宽度等，也可以使用outline:none隐藏它并使用边框样式

input.success:focus { /*or a more specific selector*/
   outline-color: red;
}

<input type="text" class="success">

input.success:focus { /*or a more specific selector*/
      outline:none;
      border:3px solid red;
}

<input type="text" class="success">

Answer 2

我遇到了同样的问题，并且我的解决方案在Antd version4中效果很好。

<Input suffix={<Component />}/>

css：

.ant-input-affix-wrapper {
  border: ....;
}

.ant-input-affix-wrapper-focused {
  border: ...;
  box-shadow: ...;
}