如何实现Button组件点击或hover时的颜色切换效果？

首先得明确你使用的是哪款UI组件库的Button，不同库的实现方式有差异，但不管是原生按钮还是主流UI库的组件，都能实现这个效果，以下是常见场景的方案：

1. 原生HTML Button #

原生按钮没有直接的属性可以配置hover/点击状态的颜色，需要用CSS伪类来实现：

/* 正常状态 */
button {
  background-color: #fff;
  color: #333;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}
/* hover状态 */
button:hover {
  background-color: #e6e6e6;
}
/* 点击激活状态 */
button:active {
  background-color: #ccc;
}

2. 主流UI组件库（以Ant Design、Material UI为例） #

大部分现代UI库都提供了属性来配置不同状态的样式，不需要自己写大量CSS：

• Ant Design Button：可以通过 hoverStyle 和 activeStyle 属性直接设置状态样式

  <Button
    hoverStyle={{ backgroundColor: '#e6e6e6', color: '#333' }}
    activeStyle={{ backgroundColor: '#ccc', color: '#333' }}
  >
    点击我
  </Button>
  

• Material UI Button：可以通过 sx 属性结合CSS伪类，或者使用主题全局配置

  <Button
    sx={{
      '&:hover': { backgroundColor: '#e6e6e6' },
      '&:active': { backgroundColor: '#ccc' }
    }}
  >
    点击我
  </Button>
  

3. 自定义Button组件场景 #

如果是你自己封装的Button组件，需要通过事件监听+状态变量来控制颜色切换：

import { useState } from 'react';

const CustomButton = ({ children }) => {
  const [buttonState, setButtonState] = useState('normal');

  return (
    <button
      style={{
        backgroundColor: buttonState === 'active' ? '#ccc' : buttonState === 'hover' ? '#e6e6e6' : '#fff',
        border: 'none',
        padding: '8px 16px',
        cursor: 'pointer'
      }}
      onMouseEnter={() => setButtonState('hover')}
      onMouseLeave={() => setButtonState('normal')}
      onMouseDown={() => setButtonState('active')}
      onMouseUp={() => setButtonState('hover')}
    >
      {children}
    </button>
  );
};

总结：如果是成熟UI库的Button，大多支持通过属性配置状态样式；原生或自定义组件则需要用CSS伪类或事件监听+状态来实现。

内容的提问来源于stack exchange，提问作者Mounika