React中CoreUI按钮点击后颜色滞留，如何实现自动恢复？

要实现点击按钮后1秒自动恢复初始样式，核心是处理按钮的焦点状态（默认点击后按钮会保持:focus状态直到点击外部），以下是两种可行方案：

方案一：手动控制焦点（推荐） #

通过React的useRef获取按钮实例，点击后设置定时器，1秒后调用blur()方法移除焦点，直接消除滞留的选中样式：

import { useRef } from 'react';
import { CButton } from '@coreui/react';

const AutoResetButton = () => {
  const buttonRef = useRef(null);

  const handleButtonClick = () => {
    // 这里添加你的按钮点击逻辑
    console.log("按钮触发点击事件");

    // 1秒后移除按钮焦点
    setTimeout(() => {
      buttonRef.current?.blur();
    }, 1000);
  };

  return (
    <CButton ref={buttonRef} onClick={handleButtonClick} color="primary">
      点击后自动恢复
    </CButton>
  );
};

export default AutoResetButton;

原理说明 #

CoreUI按钮点击后的滞留颜色来自:focus伪类的样式，调用blur()会让按钮失去焦点，自动回到初始样式状态，该方法适配所有CoreUI按钮的颜色类型（primary、secondary等）。

方案二：自定义CSS过渡样式 #

如果你不想操作DOM焦点，可以通过CSS过渡效果，让:focus状态的样式在1秒后自动恢复：

/* 根据按钮颜色调整变量，这里以primary为例 */
.auto-reset-btn:focus {
  transition: background-color 1s ease-out;
  background-color: var(--cui-btn-primary-bg) !important;
}

.auto-reset-btn:active {
  background-color: var(--cui-btn-primary-active-bg);
}

然后给按钮添加自定义类名：

<CButton className="auto-reset-btn" color="primary">
  点击后自动恢复
</CButton>

注意事项 #

• 需要根据按钮的颜色类型替换对应的CSS变量（比如secondary按钮用--cui-btn-secondary-bg）
• 若CoreUI的默认样式优先级较高，可能需要添加!important强制覆盖

内容的提问来源于stack exchange，提问作者J. Doe