How do I automatically unhighlight a Button after it's clicked - antd

Question

Antd Button
The following code comes from the antd document
import { Button } from 'antd';
ReactDOM.render(
<div>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
</div>,
mountNode,
);
Like the default Button, Dashed Button, when you click, you'll have a highlight and border shadow effect.But I want Button to revert to the default state after clicking, rather than clicking elsewhere before it becomes the default state.
This is what happens when I set up the Uploade's click button, which keeps me clicking (highlighted and bordered) when I upload the file successfully or fails, which makes people look a little unusual.Although this detail is acceptable to most people, it still feels a little strange.
I have thought about using the Dragger component of Upload, which can meet my needs on the display. But I want to automatically hide the upload button when the upload content meets the requirements, and Dragger seems to be unsatisfied. So I chose to use the Upload component. After the condition is met, the content in the Upload is made blank, and the hidden effect is achieved. The above situation will occur in the middle of the Button.
I looked at Button's API
and didn't find an action like reset.
Here is my example code. When you click on the Button component, the highlight will not disappear. When you click on the Button upload component, the highlight will not disappear after uploading the file. After clicking on the Dragger component and uploading the file, the highlighting disappears automatically.
Whether there is a good action to reset the Button style.
If you know thank you for answering.Thank you.

Answer 1

You need to customise ant-btn class like so:
.ant-btn:focus {
color: inherit !important;
border: 1px solid rgb(217, 217, 217);
}
Here is the codepen