单击按钮后如何自动取消突出显示按钮

Question

Antd Button

以下代码来自antd文档

import { Button } from 'antd';

ReactDOM.render(
  <div>
    <Button>Default</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="danger">Danger</Button>
  </div>,
  mountNode,
);

像默认的按钮，虚线按钮一样，单击时会具有突出显示和边框阴影的效果。但是我希望Button在单击后恢复为默认状态，而不是在变为默认状态之前单击其他位置。

这是我设置Uploade的单击按钮时发生的情况，当我成功上传或失败文件时，它使我保持单击状态（加高边框），这使人们看起来有些不寻常。尽管此细节对于大多数人来说都是可以接受的，仍然感觉有些奇怪。

我已经考虑过使用Upload的Dragger组件，它可以满足我在显示器上的需求。但是我想在上传内容符合要求时自动隐藏上传按钮，而Dragger似乎并不满意。因此，我选择使用Upload组件。满足条件后，将“上传”中的内容设置为空白，实现隐藏效果。以上情况将发生在Button的中间。

我看着Button's API  却没有找到复位之类的动作。

Here is my example code。当您单击按钮组件时，突出显示不会消失。当您单击按钮上载组件时，突出显示在文件上传后不会消失。单击Dragger组件并上传文件后，突出显示的内容将自动消失。

是否有好的方法可以重置Button样式。

如果您知道您的回答，谢谢。

Answer 1

您需要像这样自定义ant-btn类：

.ant-btn:focus {
  color: inherit !important; 
  border: 1px solid rgb(217, 217, 217); 
}

这里是codepen