title: change/override style for antdesign Input component
body: <p>I want to change the styling for antdesign Input component and I am not sure how to make it work.
  Now, I have been able to change the style on validation success and the border color changes to green on hover.
  but still, when I click in the field to type, it still shows blue border.
  Now, why is that happening?
  How do I override the antdesign styles?</p>
  
  <pre><code>&lt;FormItem  hasFeedback validateStatus={this.state.passwordErr} help={passwordHelp}  label="Password" &gt;
  
              &lt;Input className={validClass}   type="password" name="password" value={this.state.password} onChange={this.handlePassword} /&gt;
  
              &lt;/FormItem&gt;
  </code></pre>
  
  <p>this is a small relevant portion.</p>
  
  <p>this css works for the hover</p>
  
  <pre><code> .success:hover{
      border:1px solid green;
      box-shadow: 0 0 2px green;
  }
  </code></pre>
  
  <p>but this doesnt work when I do it without hover</p>
  
  <pre><code> .success:hover{
      border:1px solid green;
      box-shadow: 0 0 2px green;
  }
  </code></pre>
  
  <p>I have noticed that this is the portion that is blocking my css</p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>So, how do I override this css and force it to use mine?</p>
  
  <p>here's the image of the effect 
  i want to change the blue to green.
  <a href="https://i.stack.imgur.com/1S5es.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1S5es.png" alt="enter image description here"></a></p>
  
  <p>and here's the code in inspect
  <a href="https://i.stack.imgur.com/za0hJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/za0hJ.png" alt="enter image description here"></a></p>